위 아래, 한 줄로 알아보는 display: flex;

요약

1. display: flex는 자식을 1차원으로 배열한다.
2. flex box는 flexive하게 위 아래를 정할 수 있다. 구체적으로는 flex-direction을 통해 정한다.
3. flex의 새로운 위, 아래 축(주축)에서의 배치는 justify-content로 한다.
4. flex의 주축이 아닌 축(교차축)에서의 배치는 align-items로 한다.

display

display-Css | MDN
css의 display 속성은 다섯 가지 값 중 하나를 받을 수 있다.

display: block;
display: inline-block;
display: none;
display: flex;
display: grid;

여기서는 사용 빈도에 비해 이해 정도가 떨어지는 display: flex;와 부속 속성들을 다룬다.

블록들은 위부터 한 줄씩 쌓인다.

다음과 같은 html과 css를 생각해보자.

<div class="outer">
  <div class="inner">위</div>
  <div class="inner">가운데</div>
  <div class="inner">아래</div>
</div>

div.outer {
    width: 600px;
    height: 400px;
    background-color: lightblue;
}

div.outer div.inner {
    background-color: lightcoral;
}

div.outer div.inner:nth-child(1) { background-color: lightcoral; }
div.outer div.inner:nth-child(2) { background-color: lightgreen; }
div.outer div.inner:nth-child(3) { background-color: lightyellow; }

기본적으로 block들은 위에서 아래로 1차원적으로 쌓인다. 이때, 각 블록인 자식은 한 줄 전체를 차지하게 된다.

flex는 여기서 위, 아래를 자유롭게 바꾸는 속성이다. 위 아래를 바꾸는 방법은 총 네 가지가 있다. 이는 flex-direction으로 설정된다.

flex의 위, 아래가 주축, 한 줄 방향은 교차축

이제 너비, 높이를 정해보자. flex-direction: row;의 경우부터 보겠다.

너비를 정하더라도 위부터 아래 방향으로 한 줄 씩 차지하는 건 변함이 없다. 다만, flex의 위가 우리의 왼쪽, flex의 아래가 우리의 오른쪽일 뿐이다. 여기에 div.inner에 높이까지 확정해보자.

flex의 위아래는 flex의 주축이다. justify-content는 자식 요소들을 주축 방향으로 이동시켜 배치한다.

그렇다면 위아래가 아닌 축, 각 자식들이 한 줄을 차지했던 축은 주축에 수직인 축이니 교차축이라 부르자. align-items 속성을 이용하면 각 요소들을 자신의 한 줄 내에서 움직일 수 있다.

정리

1. block 요소는 원래 위에서부터 한 줄 씩 쌓인다.
2. flex 박스는 그 위의 기준을 바꿀 수 있다.
3. justify-content는 flex의 위 아래 방향으로 자식들을 배치한다.
4. align-items는 flex에서의 한 줄에서 자식들을 배치한다.