Flexbox Layout

Flexbox Layout

Flexbox Layout은 CSS3 웹 레이아웃 모델로 화면크기에 따라 container안의 element를 배치하는 효율적인 방법을 제공합니다.

 

Flex Container

display

flex를 이용하기 위해서는 display속성을 flex로 설정하여야 합니다.

.container {
  display: flex;
}

flex-direction

flex-direction 속성은 flex item의 방향을 결정합니다.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-wrap

flex item은 기본적으로 한 줄에 모두 위치하도록 되어있습니다.

flex-wrap을 이용하여 여러 줄로 wrap할 수 있습니다.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-flow

flex-flow 속성은 flex-direction속성과 flex-wrap속성을 한꺼번에 쓸 수 있는 단축속성입니다.

.container {
  display: flex;
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

justify-content는 메인 축의 정렬과 아이템 사이의 공간을 제어하는 속성입니다.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

align-items

align-items는 교차 축의 정렬과 아이템 사이의 공간을 제어하는 속성입니다.

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-content

align-content는 여러 줄의 교차 축을 정렬과 아이템 사이의 공간을 제어하는 속성입니다.

.container {
  align-content: flex-start | flex-end | center | baseline | stretch;
}

Flex Item (Children element)

order

order속성은 flex container안에서 보여지는 순서를 제어합니다.

.item {
  order: <integer>;
}

flex-grow

flex-grow 속성은 flex item의 크기를 결정합니다. (비율, 증가형)

.item {
  flex-grow: <number>;
}

flex-shrink

flex-shrink 속성은 flex item의 크기를 결정합니다. (비율, 감소형)

.item {
  flex-shrink: <number>;
}

flex-basis

flex-basis 속성은 공간을 분배하기 전에 item의 default size를 결정합니다.

.item {
  flex-basis: <length> | auto;
}

flex

flex 속성은 flex-grow, flex-shrink, flex-basis를 결합한 단축속성입니다.

.item {
  flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>];
}

align-self

align-self 속성은 각각의 item에 align-items속성을 부여할 수 있습니다.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}