접두사 (prefix)

.flex-container {
  display: -webkit-box; /* IOS 6 이하, 사파리 3.1*/
  display: -moz-box; /* 파이어폭스 19이하 */
  display: -ms-flexbox; /* IE 10 */
  display: -webkit-flex; /* 웹킷 구 버전 */
  display: flex; /* 표준 스펙 */
}


기본 속성들

주축 (main-axis) 과 교차축 (cross-axis) 지정

.flex-item {
  flex-direction: row; /* default - 주축: 가로 / 교차축: 세로 */
  flex-direction: row-reverse; /* 위와 동일 + 역으로 나열 */

  flex-direction: column; /* 주축: 세로 / 교차축: 가로 */
  flex-direction: column-reverse; /* 위와 동일 + 역으로 나열 */
}


flex-wrap (한줄 또는 여러줄로 배치)

.flex-container {
  display: flex;
  flex-wrap: nowrap; /* default - 한 줄에 표시 */
  flex-wrap: wrap; /* 여러 줄에 표시 */
  flex-wrap: wrap-reverse; /* 여러 줄에 표시 + 역 방향*/
}


flex-flow (flex 방향 + 여러 줄 배치 한꺼번에 지정)

.flex-container {
  display: flex;
  flex-flow: column wrap; /* 위에서 아래로, 여러 줄로 표시*/
}


order (flex item 의 배치 순서 지정)

.flex-item1 {
  order: 0; /* 기존 코드의 순서대로 배치 */
}
.flex-item2 {
  order: 2; /* 두 번째로 배치 */
}
.flex-item3 {
  order: 1; /* 첫 번째로 배치 */
}


flex (flex item 의 크기 조절)

flex : [<flex-grow> <flex-shrink> <flex-basis>] | auto | initial

| 은 또는 을 의미한다.

  • flex-grow : flex item 의 너비를 얼마나 늘일지 숫자로 지정
  • flex-shrink : flex item 의 너비를 얼마나 줄일지 숫자로 지정

  • flex-basis : flex item 의 기본 크기를 지정

    • width 처럼 너비 값을 지정할 수도 있음
    • 0 인 경우 flex-grow 와 flex-shrink 의 인수 값을 함께 사용
    • auto 인 경우 해당 flex item 의 너비 값을 사용
  • initial : flex item 의 width/height 값에 의해 크기가 결정되는데 flex container 의 공간이 부족할 경우, 최소 크기까지 줄인다.
  • auto : flex item 의 width/height 값에 의해 크기가 결정되지만 flex container 의 공간에 따라 늘이거나 줄인다.
#flex-item1 {
  flex: 1 1 0; /* 늘이거나 줄이지 않음 */
}
#flex-item2 {
  flex: 2 2 0; /* 2배 늘이거나 2배 줄임 */
}


배치를 위한 속성들

justify-content (주축 기준의 배치)

  • flex-start : 주축의 시작점을 기준으로 배치

  • flex-end : 주축의 끝점을 기준으로 배치

  • center : 주축의 중앙을 기준으로 배치

  • space-between : 첫 번째와 마지막 항목을 양 끝에 배치한 후 나머지 항목들은 동일 간격으로 배치

  • space-around : 모든 flex item 을 같은 간격으로 배치


align-items (교차축 기준의 배치)

  • stretch : (default) flex item 을 확정해 교차축을 꽉 채움

  • flex-start : 교차축의 시작점을 기준으로 배치

  • flex-end : 교차축의 끝점을 기준으로 배치

  • center : 교차축의 중앙을 기준으로 배치

  • baseline : 시작점과 글자 기준선 (글자 중앙)이 가장 먼 flex item 을 시작점으로 배치함. 모든 flex item 의 글자 기준선을 해당 item 에 맞춰서 배치한다.

align-self (교차축 기준의 배치)

  • align-items 와 동일한 값들을 가짐

  • align-items 는 flex container 에 지정해 모든 item 들의 배치 방법을 지정하고
    align-self 는 flex item 에 지정해 해당 item 만의 배치 방법을 지정

  • default 는 auto 이며 align-items 의 배치 방법을 따른다.


align-content (여러 줄일 때의 배치)

justify-content 의 속성 값과 동일하다.

align-content : flex-start (default) | flex-end | center | space-between | space-around