[CSS] Flex Box

노마드코더 - CSS Layout 마스터클래스 강의를 정리한 내용입니다.

before FlexBox

FlexBox 등장 이전에는 요소가 가지는 기본 특성을 이용해 화면을 구성했다.

block 속성을 가진 요소는 width와 height를 가지며 화면의 한 줄을 전부 차지하고 다른 요소가 옆으로 오는 것을 막는다.

반면에, inline은 width와 height 속성을 가지지 않으면서 해당 줄(line) 안(in)에 속한다.

block 요소를 가지면서 inline으로 정렬하고 싶다면 display: inline-block을 선언한다.

.box {
  width: 200px;
  height: 200px;
  background-color: tomato;
  display: inline-block;
}

.box:first-child {
  margin-left: 300px; /* 350px, 310px, 315px ...*/
}

.box:last-child {
  margin-right: 300px; /* 350px, 310px, 315px ...*/
}

화면 정렬에 대한 요구사항이 들어왔다면 위처럼 하나씩 계산해 정렬한다.

float을 통해 요소의 정렬을 조금 더 쉽게 할 수 있다. 그러나 세세한 설정은 수동으로 조작해야 한다.

.box:first-child {
  float: left;
}

.box:last-child {
  float: right;
}

.box:nth-child(2) {
  margin: 0 50%; /* 25%, 13%, 10% ...*/
}

하나하나 조정해야 하는 방식은 명령형이며, 이러한 방법은 번거롭고 어렵다. 다양한 화면 크기가 등장하면서 이 어려움은 더욱 심화되었다.

요구사항이 다양해지면서 그렇게 되어야 한다라고 브라우저에게 알려주면 알아서 계산해주는 방식인 선언형이 등장했다.

예를 들어, text-align 속성은 브라우저에게 항상 문자열은 이렇게 정렬되어야 한다를 선언하고, 이후 작성된 문자열은 모두 해당 속성에 맞게 알아서 정렬된다.

선언형으로 화면 구성을 그려주는 것이 FlexBox이다.

FlexBox

FlexBox는 inline-block이나 float과 다르게 자식 요소에 관심이 없다. 부모 요소에 작성하면 그대로 자식 요소를 정렬한다. 단, 바로 아래 있는 직속 자식이어야 만한다.

.father {
  display: flex;
  justify-content: space-between;
}

.box {
  width: 200px;
  height: 200px;
  background-color: tomato;
}

예시로, justify-content: space-between를 선언하면 margin을 계산할 필요없이 첫 번째와 마지막 box는 양 끝에, 두 번째 box는 가운데로 정렬한다.

FlexBox Properties

FlexBox의 속성은 전부 부모 요소에서 작성한다.

gap

자식 요소마다 margin을 부여하고 싶다면 gap 속성을 사용한다.

.father {
  display: flex;
  gap: 10px;
}

gap은 row-gap과 column-gap을 합친 속성이다. 한 줄로 행열 margin을 설정하고 싶다면 gap: row-gap column-gap 순서로 작성한다.

flex-direction

자식 요소 정렬 방향을 정하는 속성은 flex-direction이며, 기본값은 row이다. 세로로 정렬할 시에는 column으로 작성한다. 또한, 정렬되는 자식 요소의 순서를 뒤집을 때는 -reverse 접미사를 더한다.

.father {
  display: flex;
  gap: 10px;
  flex-direction: column; /* default: row*/
  /* row-reverse, column-reverse */
}

justify-content(주축) and align-items(교차축)

flex-direction이 정하는 방향은 매우 중요하다. FlexBox를 정의하는 두 개의 축이 있기 때문이다. Main Axis(주축)와 Cross Axis(교차축)이다.

Main Axis(주축)는 방향이 row일 때는 가로선(왼쪽➡오른쪽)이 되고, column일 때는 세로선(위쪽➡아래쪽)이 된다. Cross Axis(교차축)은 그와 반대, 즉 row일 때는 세로선이, column일 때는 가로선이 된다. -reverse는 반대 방향으로 동작한다.

Main Axis(주축)의 요소 이동은 justify-content 속성을 사용한다.

Cross Axis(교차축)의 요소 이동은 align-items 속성을 사용한다.

flex-direction이 row인 경우

flex-direction이 column인 경우

flex-wrap

flex 컨테이너가 한 줄인지, 여러 줄인지 정한다.

기본값은 nowrap으로, 자식 요소를 전부 한 줄에 압축해 넣는다. 자식 요소의 기본 크기는 무시된다.

wrap인 경우, 컨테이너를 넘치는 자식 요소의 경우 다음 줄로 내린다.

-reverse suffix를 가지고 있다.

flex-flow

flex-direction과 flex-wrap을 합쳐 놓은 단축 속성이다. flex-flow: row wrap 형태로 사용한다.

align-content

컨테이너가 여러 줄(flex-wrap: wrap)일 때 요소들을 줄에 맞춰 정렬한다.

.father {
  display: flex;
  height: 100vh;
  width: 100%;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
  flex-flow: row wrap;
}

가령, 이렇게 작성하면 첫 번째 줄과 두 번째 줄 사이에 빈 공간이 생긴다. 이 간격은 align-content를 사용해 줄일 수 있다.

.father {
  /* ... */
  align-content: center;
}

교차축의 가운데를 기준으로 모든 라인이 정렬된다.

order

자식 요소에 부여하는 속성으로, flex 컨테이너 내부에서 자식 요소의 순서를 결정한다.

순서는 상대적으로 정해지며, 기본값은 0이다.

.box:nth-child(3) {
  order: 1;
  background-color: blueviolet;
}

.box:nth-child(6) {
  order: 2;
  background-color: aqua;
}

이렇게 작성할 경우 box 3은 끝에서 2번째로, box 6은 맨끝으로 이동한다. 나머지 box의 order가 0이기 때문이다.

align-self

자식 요소에 부여하는 속성으로, 요소에 개별적으로 align-items 속성을 적용한다.

.father {
  display: flex;
  height: 100vh;
  width: 100%;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}

.box {
  width: 200px;
  height: 200px;
  background-color: tomato;
}

.box:first-child {
  background-color: blueviolet;
  align-self: flex-start;
}

.box:last-child {
  background-color: aqua;
  align-self: flex-end;
}

flex-grow

자식 요소에서 설정하며, 값을 직접 설정하지 않고 flex 컨테이너의 크기만큼 늘리는 속성이다. 기본값은 0이고 단위는 비율로 사용한다. flex-grow: 1이라면 flex 컨테이너의 공간 최대 크기만큼 늘어난다.

.box:first-child {
  background-color: blueviolet;
  flex-grow: 1;
}

.box:last-child {
  background-color: aqua;
  flex-grow: 1;
}

두 개의 박스가 1:1 비율로 컨테이너의 공간만큼 늘어난다.

flex-shrink

자식 요소에서 설정하며, 값을 직접 설정하지 않고 flex 컨테이너의 비율에 맞춰 줄이는 속성이다. 기본값은 1이다.

.box:first-child {
  background-color: blueviolet;
  flex-shrink: 3;
}

.box:nth-child(2) {
  background-color: teal;
  flex-shrink: 0;
}

.box:last-child {
  background-color: aqua;
  flex-shrink: 1;
}

box 2는 화면 크기가 줄어도 크기가 그대로인 반면, box 1과 box 3은 크기가 줄어든다.

flex-basis

자식 요소에서 설정하며, flex-grow와 flex-shrink의 초기값을 설정하는 속성이다. flex-basis: 500px로 설정하면 크기가 500을 넘어가는 시점에서 grow되거나 shrink된다.

.box:first-child {
  background-color: blueviolet;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 500px;
}

위 코드에서 box 1은 화면이 아무리 작아져도 500px 아래로는 줄어들지 않는다.

flex

위의 세 속성, flex-grow, flex-shrink, flex-basis를 하나로 합친 단축 속성이다. flex: grow shrink basis 순서로 적는다.

.box:first-child {
  background-color: blueviolet;
  flex: 1 0 500px;
}

Flexbox Froggy Game

FlexBox를 게임으로 연습할 수 있는 사이트이다.

https://flexboxfroggy.com/#ko