Flex (Flexible Box)

개념

CSS의 flex는 엘리먼트들의 크기, 위치를 쉽게 잡아주고 많은 레이아웃 작업을 쉽게 만들어주는 도구이다. flexbox로 레이아웃을 구성하기 위해서는, 먼저 어떤 요소들을 flexbox 레이아웃 요소들로 구성할지 선택해야 한다. flexbox 레이아웃의 영향을 주고 싶은 요소의 부모 요소에 display: flex 값을 지정해줘야 한다.

기본적으로 flexbox 레이아웃을 구성하기 위해서는 아래와 같이 복수의 자식 요소인 flex item과 상위 부모 요소인 flex container로 구성된다.

이미지참고-Flexbox Mdn

flexbox로 레이아웃 될 때 두 개의 축을 따라 배치된다.

• 기본 축(main axis)은 flex item이 배치되고 있는 방향으로 진행하는 축이다. 예를 들어, 페이지를 가로지르는 행 또는 페이지 밑으로 쌓이는 열이다. 이 기본 축의 시작과 끝을 main start, main end라고 한다.

• 교차 축(cross axis)은 flex item이 내부에 배치되는 방향에 직각을 이루는 축이다. 이 교차 축의 시작과 끝을 cross start, cross end라고 한다.

flexbox는 기본 축이 진행되는 방향을 지정할 수 있는데, 이는 flex-direction이라는 속성을 이용하여 행은 row, 열은 column이라는 값으로 지정한다. 이 외에도 여러 가지 속성들이 있다.

요소

flexbox를 사용하기 위해 필자는 다음과 같이 요소를 정의했다.

<div class="flex-container">
  <div class="flex-item">flex item1</div>
  <div class="flex-item">flex item2</div>
  <div class="flex-item">flex item3</div>
  <div class="flex-item">flex item4</div>
<div>

.flex-container {
  display: flex;
}

flex

display: flex를 사용했을경우 레이아웃이 아래와 같이 정의된다.

부모 요소

부모 요소에는 기본적으로 다음과 같은 속성이 있다.

• flex-direction
  item들의 행, 열 방향을 나타낸다. 값으로는 row, column, row-reverse, column-reverse이 있다.

  • row(default)

    

  • column

    

  • row-reverse

    

  • column-reverse

    

• flex-wrap
  item들의 너비의 합이 flex container 너비를 초과할 때 어떻게 처리할지를 결정하는 속성이다. 값으로는 nowrap(줄바꿈 안함), wrap(줄바꿈), wrap-reverse(역 줄바꿈)이 있다.

  • nowrap(default)

    

  • wrap

    

  • wrap-reverse

    

• justify-content
  item과 container간에 수평방향으로 여백을 주는 방식을 지정한다. 값으로는 flex-start, flex-end, center, space-between, space-around이 있다.

  • flex-start(default) - 요소들을 컨테이너의 왼쪽으로 정렬한다.

    

  • flex-end - 요소들을 컨테이너의 오른쪽으로 정렬한다.

    

  • center - 요소들을 컨테이너의 중앙으로 정렬한다.

    

  • space-between - 요소들을 사이에 동일한 간격을 둔다.

    

  • space-around - 요소들을 감싼 둘레에 동일한 간격을 둔다.

    

• align-items
  item과 container간에 수직방향으로 여백을 주는 방식을 지정한다. 값으로는 flex-start, flex-end, center, stretch가 있다.
  • flex-start(default) - 교차축의 앞부터 요소를 배치한다.

    

  • flex-end - 교차축의 끝부터 요소를 배치한다.

    

  • center - 교차축의 중간에 요소를 배치한다.

    

  • stretch - 교차축의 양끝 기준 상하로 쭉 늘어난다.

    

• align-content
  item들을 한 줄에 다 표시할 수 없어서 다음 줄로 넘김이 발생했을 때 줄 사이에 여백을 결정하는 속성이다. 이것은 flex-wrap: wrap 줄 바꿈 속성을 필수로 지정해줘야 한다. 값으로는 flex-start, flex-end, center, space-between, space-around, stretch가 있다.
  • flex-start(default)

    

  • flex-end

    

  • center

    

  • space-between

    

  • space-around

    

  • stretch

    

자식 요소

자식 요소에는 기본적으로 다음과 같은 속성이 있다.

• order
  item이 배치될 순서를 지정한다. 속성값은 숫자이며 작을수록 먼저 배치된다.

  .flex_container :nth-child(1) {
    order: 100;
  }
  .flex_container :nth-child(2) {
    order: -5;
  }
  .flex_container :nth-child(3) {
    order: 2;
  }
  .flex_container :nth-child(4) {
    order: -10;
  }

  

• flex-grow
  container 여분의 여백이 있을때 동작한다. flex-grow의 설정된 비율만큼 분배되도록 동작한다.

  .flex_container :nth-child(1) {
    flex-grow: 4;
  }
  .flex_container :nth-child(2) {
    flex-grow: 1;
  }
  .flex_container :nth-child(3) {
    flex-grow: 1;
  }
  .flex_container :nth-child(4) {
    flex-grow: 2;
  }

  

  flex_item1: (4/8)의 비율, flex_item2: (1/8)의 비율, flex_item3: (1/8)의 비율, flex_item4: (2/8)의 비율만큼 분배되었다.

• flex-basis
  item의 기본 너비를 설정한다.

  .flex_item {
    flex-basis: 100px;
  }

  

  item들이 100px의 고정 너비의 크기로 지정되었다.

이 외에도 flexbox를 사용하는 속성들이 많지만, 필자가 주로 사용하는 속성들을 기준으로 정리했다.

브라우저 호환성

flexbox 지원은 파이어폭스, 크롬, 오페라, 엣지, IE11, 안드로이드 및 iOS 최신 버전 등 대부분의 신형 브라우저에서 사용 할 수 있습니다. 하지만, 구형 브라우저에는 여전히 flexbox를 지원하지 않습니다. flexbox 기능을 지원하지 않을 경우 레이아웃이 완전히 깨져서 사용할 수 없게 됩니다. 그래서 Flexbox를 디자인의 기본 레이아웃 메서드를 사용할 것을 권고하고 있다.