Flex, 어디에 쓰는 물건인고?

Flex(플렉스)는 Flexible Box, Flexbox라고 부르기도 합니다.

Flex는 레이아웃을 효율적으로 배치하기 위해 고안됐습니다. 그래서 기존의 float, inline-block 등의 방식보다 더 편리합니다.

먼저 다음과 같이 html 태그를 만들어줍니다.
부모 박스로 container를 두고, 자식 박스들로 item을 두었습니다.

<div class="container">
  <div class="item left">helloflex</div>
  <div class="item center">abc</div>
  <div class="item right">hiflex</div>
</div>

부모 태그와 자식 태그에 flex 관련 속성을 지정해가며 flex에 대해 알아가보도록 하겠습니다.

display: flex;

먼저 부모 태그(container)에 display: flex와 display: block을 번갈아 사용하여 비교해보겠습니다.

.container {
  display: flex;
  border: 1px dotted blue;
  padding: 10px;
}
 
.item {
  border: 1px solid purple;
  margin: 0 5px;
}

container의 display 속성을 flex로 지정 시, div 태그들은 다음과 같이 정렬됩니다.
이 한 줄의 속성 만으로 item들이 가로로 정렬이 된 것을 볼 수 있습니다.
보기 편하기 위해 10px의 padding을 지정했습니다.

비교를 위해 container의 display 속성을 block으로 바꿔봤습니다.
자식 요소들이 한 줄을 꽉 채우네요.

display 속성을 inline-flex로 변경해봤습니다.
flex에 의해 자식 요소들이 한 줄로 정렬이 되고, 부모 태그의 크기도 자식 태그의 크기에 맞춰 좁아진 것을 볼 수 있습니다.

flex-direction : 배치 방향을 결정

아이템들이 배치되는 축의 방향을 결정하는 속성입니다. 가로로 배치할 것이냐, 세로로 배치할 것이냐를 결정하죠.

row (기본값)

.container {
  display: flex;
  border: 1px dotted blue;
  padding: 10px;
  
  flex-direction: row; /* 기본값 */
}

flex-direction: row는 display: flex의 기본값입니다.

row-reverse

flex-direction 속성의 값을 row-reverse로 지정했습니다.
그랬더니 오른쪽에서부터 왼쪽으로 정렬이 되었습니다.
위치만 오른쪽으로 이동한 것이 아니라, 자식 태그의 순서가 오른쪽에서부터 하나씩 정렬이 되었습니다.

column

flex-direction: column;

자식 요소의 정렬 방향을 가로가 아닌 세로로 정렬하는 값입니다.
display: block; 과 매우 유사합니다.

column-reverse

row-reverse와 유사하게, 자식 태그가 아래에서부터 반대 순서로 정렬이 됩니다.

justify-content : 가로축 방향 정렬

가로축 방향으로 아이템들을 정렬하는 속성입니다.

.container {
  display: flex;
  border: 1px dotted blue;
  padding: 10px;
  
  justify-content: flex-start; /* 기본값 */
}

flex-start (기본값)

flex-start는 기본값입니다. flex-end는 오른쪽에서부터 정렬이 됩니다.

center

justify-content: center;

아이템들을 가로축 기준으로 가운데 정렬합니다.

space-between

아이템들의 간격을 일정하게 만들어줍니다.

space-around

아이템들의 좌우 둘레를 일정하게 만들어줍니다.

space-evenly

아이템들의 사이와 양 끝의 간격을 일정하게 만들어줍니다.

space-between, space-around, space-evenly의 차이

다음의 그림으로 차이를 구분할 수 있습니다.

align-items : 수직축 방향 정렬

수직축 방향 정렬 테스트를 위해 부모 태그에 height 속성에 200px의 값을 주었고,
각각 item의 글자 크기를 다르게 했습니다.
부모 태그에 height값을 주면 align-items 속성에 stretch가 기본값으로 적용됩니다.

.container {
  display: flex;
  border: 1px dotted blue;
  padding: 10px;
  height: 200px;
  
  align-items: stretch; /* 기본값 */
}

stretch (기본값)

아이템들이 수직축 방향으로 길게 늘어납니다.
align-itmes 속성에 stretch 값을 주지 않고, height 속성에 특정 값만 지정해도 박스는 늘어납니다.

center

align-items: center;

아이템들을 수직축의 가운데로 정렬합니다.

baseline

아이템들의 텍스트의 베이스라인을 기준으로 정렬됩니다.