11. flexbox

flexbox

flexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다.
flexbox를 1차원 모델이라 부르는 이유는 레이아웃을 다룰 때 한번에 하나의 차원 (행이나 열)만을 다룬다는 특성 때문이다.

flexbox를 flex 컨테이너라고도 한다 (요소들을 포함하기 때문).
flex 컨테이너를 만들기 위해서는 컨테이너에 display: flex를 적용해야한다.

적용 전

<div>
  <div class="itme">하나</div>
  <div class="itme">둘</div>
  <div class="itme">셋</div>
</div>

적용 후

<div style="display: flex">
  <div class="itme">하나</div>
  <div class="itme">둘</div>
  <div class="itme">셋</div>
</div>

flexbox에는 '주축(main-axis)'과 '교차축(cross-axis)'이 있다.

주축은 기본적으로 가로 방향 이다.

주축과 교차축을 바꿔주기 위해서 사용하는 것이 바로 flex-direction이다.

flex-direction

flex-direction 속성은 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.

flex-direction: row;(기본값)

flex-direction: row-reverse

flex-direction: column;

flex-direction: column-reverse;