[CSS] Flexbox

안녕하세요. 약 1년 6개월의 솔루션 웹기획, 그리고 이제 막 서비스 기획 4개월차 아기 기획자 소소한G 입니다.

 

이번시간에는 CSS시간이에요. Flexbox를 알지 못했을 때는 float를 이용하여 객체들을 나란히 붙일 때 객체를 띄워서 붙이기만 했었는데, Flexbox를 알고 나서 더 깔끔하고 목적에 맞게 적절히 아이템들을 나열할 수 있었어요.

 

Flexbox에 대해 알아볼까요? 

 

[WHY : 왜 사용할까?]

Flex는 flex container가 사용 가능한 공간을 가장 적절하게 잘 채울 수 있도록 flex items의 너비와 높이를 변경할 수 있는 능력을 제공한다. 유연한 flex container는 사용 가능 한 공간을 채우기 위해 flex items을 확장하거나 오버플로우를 방지하기 위해 아이템을 축소시킨다. 

 

안녕하세요. 약 1년 6개월의 솔루션 웹기획, 그리고 이제 막 서비스 기획 4개월차 아기 기획자 소소한G 입니다.

 

[TERMS : 용어]

º flex container : 부모 요소의 속성

º flex items : 자녀요소의 속성

º main axis : 가로 중심축

º cross axis : 세로 중심축

 

[DETAILS : 상세 설명]

[container에 적용]

 

1. display : flex;

display:flex를 적용하면 속해 있는 모든 자녀 요소들을 유연한 상황에 있도록 만들어준다. 

 

2. flex-direction

메인 축을 따라서 flex item들이 container속에 배치되는 방향을 정의한다.

 

º row : 왼쪽에서 오른쪽 방향의 순서를 가지는 행

º row-reverse : 오른쪽에서 왼쪽 방향의 순서를 가지는 행

º column : 위에서 아래방향의 순서를 가지는 열

º column-reverse : 아래에서 위 방향의 순서를 가지는 열

 

3. flex-wrap

기본적으로 flex item들은 모두 한 줄에 맞추어지려 할 것이다. 이에 따라 컨테이너의 너비에 맞추어 항목의 나열을 유연하게 변경할 수 있다. 

 

º nowrap : (기본값) flex item들이 한 줄에 맞추어지는 것

º wrap : flex item들이 주어진 container 너비에 맞추어 위에서 아래로 순서를 지키며 여러 라인으로 나열되는 것

º wrap-reverse : flex item들이 주어진 container 너비에 맞추어 아래에서 위로 순서를 지키며 여러 라인으로 나열되는 것

 

3. justify-content

container가 가진 남은 공간 내에서 item들을 적절히 분배하는 기능

 

º flex-start : (기본값) 시작 부분에서 item들이 모여지도록 적용

º flex-end : 끝 부분에서 item들이 모여지도록 적용

º center : item들이 모두 라인을 따라 중간에 모이도록 적용

º space-between : item들이 서로의 좌우 공간을 고게 분배하여 배치. 첫번째와 마지막 공간을 비워두지 않도록 적용

º space-around : item들이 좌 우 공간을 모두 고르게 가지면서 배치. 단, 양 옆으로 공간을 가지기 때문에 고르게 보이지 않을 수도 있다. 

º space-evenly : item들이 시작점과 끝점, 그리고 서로 사이의 공간을 모두 고르게 분배하여 배치. 

 

3. align-items

cross axis를 따라 item들을 정렬하는 기능

 

º flex-start : cross-axis의 첫 지점에 맞추어 item을 정렬

º flex-end : cross-axis의 마지막 지점에 맞추어 item을 정렬

º center : cross-axis에서 중간에 정렬

º stretch : (기본값) : 최대, 최소너비를 모두 고려하여 container의 모든 공간을 채움

º baseline : item들이 가지고 있는 텍스트의 baseline에 따라 item을 정렬

 

4. align-contents

º flex-start : main-axis와 cross-axis의 첫 지점에 맞추어 item을 정렬

º flex-end : main-axis와 cross-axis의 마지막 지점에 맞추어 item을 정렬

º center : main-axis와 cross-axis에서 중간에 정렬

º stretch : (기본값) : 최대, 최소너비를 모두 고려하여 container의 모든 공간을 채움

º space-between: item들이 서로의 좌우 공간, 위 아래 공간을 고게 분배하여 가운데 배치. 위쪽 시작점과 마지막 공간의 마지막점을 비워두지 않도록 적용

º space-around: item들이 서로의 좌우 공간, 위 아래 공간을 고르게 분배하여 가운데 배치.

 

아래 링크를 통해 그림으로 더 쉽게 배울 수 있어요.

참고해주세요.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox