[CSS] Flexbox

Flexbox는 CSS3에서 처음 등장한 개념으로 Flexible Box Layout을 의미합니다.
container와 item이라는 개념을 이용하여 가로 정렬, 세로 정렬 등 레이아웃을 지정해줄 수 있는 속성을 말합니다. Flexbox 등장 이전에는 요소들을 정렬하는 방법이 정해져있지가 않아 여러가지 방법(inline-block과 같은)을 사용해 우회해서 정렬을 했었습니다.

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  border: 5px dashed orange;
  /* 'display: flex'는 container영역에 지정해줘야 합니다. */
  display: flex;
}
.item {
  width: 50px;
  height: 50px;
  border: 3px solid blue;
}

기본 용어

flex container

display: flex를 지정해줄 영역을 말합니다.

flex item

container에 포함될 요소들을 말합니다.

main axis

main이 되는 축, 주축을 의미합니다.

cross axis

main axis와 수직을 이루는 축, 교차축을 의미합니다.

Container 관련

Container - display

• display: inline, display: block은 해당 요소와 인접해 있는 외부 요소들과의 레이아웃를 바꾸기 위해 사용했던 속성인데 display: flex로 지정을 하게 되면 내부 요소들의 레이아웃를 바꿀 수 있습니다.
• 외부, 내부 레이아웃을 둘 다 바꾸는 방법도 있는데 display: inline-flex와 같이 hyphen('-')을 이용하면 가능합니다.

  💡 display: flex는 container에서 지정해줘야 합니다 !
  💡 CSS2에서는 display: inline flex처럼 space(' ')로 구분해줍니다.

flex-direction

레이아웃의 정렬 방향을 지정해줄 수 있습니다.

• row: 가로로 배치, 정방향
• row-reverse: 가로로 배치, 역방향
• column: 세로로 배치, 정방향
• column-reverse: 세로로 배치, 역방향

flex-wrap

item들을 강제로 한줄에 배치되게 할 것인지 여러행으로 나누어 배치되게 할 것인지 정해주는 속성입니다. (기본값: nowrap, 강제로 한 줄에 배치)

• nowrap: item들을 강제로 한 줄에 배치합니다. container 크기에 맞춰서 item들의 width, height가 변경됩니다.
• wrap: item들이 여러 행에 걸쳐서 배치됩니다. item들의 width, height값을 유지할 수 있게 됩니다.
• wrap-reverse: wrap 속성값과 동일하지만 시작점, 끝점이 반대가 됩니다.

flex-flow(shorthand)

flex-direction, flex-wrap을 한번에 지정해줄 수 있는 shorthand입니다.

flex-flow: row wrap

justify-content

• main-axis(주축) 방향으로 아이템들을 정렬할 수 있는 속성입니다.

1. flex-start: 아이템들을 시작점으로 정렬합니다. (왼쪽 혹은 위쪽)
2. flex-end: 아이템들을 끝점으로 정렬합니다. (오른쪽 혹은 밑에)
3. center 아이템들을 가운데로 정렬합니다.
4. space-between: 아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다.
5. space-around: 아이템들의 “둘레(around)”에 균일한 간격을 만들어 줍니다.

align-items

• cross-axis(수직축) 방향으로 아이템들을 정렬할 수 있는 속성입니다.(기본값은 stretch)
• 한 줄만을 가지는 플렉스 박스에서는 효과가 없으며, 두 줄 이상을 가지는 플렉스 박스에서만 효과가 있습니다.
• 다음과 같은 속성값을 설정할 수 있습니다.

1. stretch : 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다.
2. flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됩니다.
3. flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됩니다.
4. center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치됩니다.
5. baseline : 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치됩니다.

align-content

• flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성입니다.

Item 관련

order

flex, grid 컨테이너 안에서 현재 요소의 배치 순서를 결정할 수 있는 속성입니다.
기본값은 0이며 음수, 양수를 지정하여 맨 앞, 맨 뒤로 배치를 변경할 수 있게 됩니다.
내용을 변경하지 않고 출력 순서만 변경해줄 때 사용합니다. 논리 순서가 변하지 않으므로 order를 통해 순서를 변경했다면 tab키를 눌렀을 때 focus가 보이는 것과 다르게 동작할 수 있습니다.

flex-grow

• item이 container 내부에서 차지하는 공간의 크기를 결정할 수 있는 속성입니다. 기본값은 0입니다.
• flex-grow: 1로 설정하게 되면 남아있는 모든 공간을 item의 갯수로 나눠서 설정된 width값 보다 더 넓게 설정하게 됩니다. 소숫점으로도 값을 지정할 수 있습니다.
• item들이 각각 다른 flex-grow값을 갖게 된다면 값에 비례하는 공간값을 나누어서 할당받게 됩니다.
• container에 flex-wrap: nowrap을 설정하면 여러 줄로 배치되어 나눠진 item들이 각각의 줄에서 내부공간을 차지하게 됩니다.
  
• 해당 라인에 있는 item들의 길이를 모두 더한 값이 container보다 작을 때만 동작합니다.

flex-shrink

• flex-grow와 비슷한 속성입니다. flex-grow는 늘어나는데 비해 flex-shrink는 줄어드는 값을 지정해주는 속성입니다.
• 해당 라인에 있는 item들의 길이를 모두 더한 값이 container보다 클 때만 동작합니다.
• 음수를 제외한 실수 범위의 수를 속성값으로 가질 수 있습니다.

flex-basis

• item의 초기 크기(grow, shrink되지 않은 기본 크기)를 지정할 수 있는 속성입니다.
• flex-basis

flex(shorthand)

flex-grow, flex-shrink, flex-basis

align-self

• Item을 수직축으로 정렬해주는 속성입니다. align-items가 전체 아이템에 대해 수직축으로 정렬해주는 속성이라면 align-self는 해당 아이템을 수직축으로 정렬해주는 속성입니다.