[CSS] Flexbox

CSS3 에 명시된 레이아웃 모듈. 요소들의 공간 활용을 어떻게 해줄건지를 설정 할 수 있음.

추후 레이아웃 구성에 중요한 녀석일 것 같음.

.container { display: flex }

기본적으로 각 요소들의 부모 요소에 위 스타일을 먹이면 됨.

컨테이너 옵션들

flex-direction

  - 행으로 할지 열로 할지를 정하는 옵션

  - values

    row

      기본 값. 수평방향(행)

    row-reverse

      수평방향(행). 순서 역순

    column

      수직방향(열)

    column-reverse

      수직방향(열). 순서 역순

flex-wrap

  - 길이가 길어질 경우 줄바꿈을 어찌할지에 대한 옵션

  - values

    nowrap

      기본 값. 아이템을 한 줄에 모두 표현

    wrap

      적정 길이 이상이면 복수의 줄에 걸쳐 표현

    wrap-reverse

      wrap과 같지만, 역방향 표시

justify-content

 - 컨테이너에 공간이 남을 경우 정렬 방법

 - values

    flex-start

      요소들을 모두 묶어서, 수평방향의 시작 점(왼쪽)

    flex-enter

      요소들을 모두 묶어서, 수평방향의 끝 점(오른쪽)

    center

      요소들을 모두 묶어서, 수평방향의 중앙

    space-between

      요소들을 컨테이너의 양쪽 끝에 맞춰 정렬

    space-around

      컨테이너의 양쪽 끝 기준으로 각 요소들의 전, 후에 일정한 간격의 공간을 만들어 정렬

align-items

  - 수직 정렬 방법(justify-content의 vertical version)

  - values

    flex-start

      요소들을 모두 묶어, 수직방향의 시작 점(위)

    flex-enter

      요소들을 모두 묶어, 수직방향의 끝 점(아래)

    center

      요소들을 모두 묶어, 수직방향의 중앙

    baseline

      컨테이너의 baseline에 맞춰 정렬

    stretch

      컨테이너 전체에 꽉차도록 늘려줌

align-content

  - 줄바꿈이 되는 컨테이너의 수직 정렬 방법(줄바꿈이 있을때만 동작)

  - values

    flex-start

      요소들을 모두 묶어, 수직방향의 시작 점(위)

    flex-enter

      요소들을 모두 묶어, 수직방향의 끝 점(아래)

    center

      요소들을 모두 묶어, 수직방향의 중앙

    baseline

      컨테이너의 baseline에 맞춰 정렬

    space-between

      컨테이너의 수직방향 기준으로 아이템 사이의 줄(행)을 일정한 간격을 두고 정렬

    space-around

      컨테이너의 양쪽 끝을 기준으로 각 아이템 줄(행)의 전, 후에 일정한 간격의 공간을 만들어 정렬

    stretch

      컨테이너의 수직방향 기준으로 각 행의 아이템 높이를 컨테이너 높이에 맞게 늘림

각 요소들 옵션

  - 부모 옵션에 flex가 설정 되어 있어야 

order

  - z-index와 같은 식으로 동작하며, 값이 작을수록 앞쪽에 표시

  - values : INT

flex-grow

  - 요소가 차지할 비중. 높을수록 커짐

  - values : unsigned INT

flex-shrink

  - 요소가 차지할 비중. 높을수록 작아짐

  - values : unsigned INT

flex-basis

  - 요소의 기본 넓이를 지정

  - values : 길이(px, em, rem..)과 %(퍼센테이지)

flex

  - flex-grow, flex-shrink, flex-basis 를 모두 한번에 설정

  - 각 속성의 값들

align-self

  - 부모의 정렬 방식 기준 안에서 독자적인 정렬

  - values

    auto

    flex-start

    flex-end

    center

    baseline

    stretch