CSS 이론 채워 넣기 - 10. flex box

1. flex-box

Flexbox는 모던 웹을 위하여 제안된 기존 layout보다 더 세련된 방식의 니즈에 부합하기 위한 CSS3의 새로운 layout 방식이다.

요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다.

2. Flexbox container 속성

2.1 flex-direction

flex 컨테이너안의 flex item 들의 배치 방향을 설정한다. 기본값은 row 이다.

속성	설명
flex-direction: row;	좌에서 우로(ltr) 수평 배치된다. flex-direction 속성의 기본값이다.
flex-direction: row-reverse;	우에서 좌로(rtl) 수평 배치된다.
flex-direction: column;	위에서 아래로 수직 배치된다.
flex-direction: column-reverse;	아래에서 위로 수직 배치된다.

2.2 flex-wrap

flex-wrap 속성은 flex 컨테이너의 width보다 flex item들의 width의 합계가 더 큰 경우, 한줄로 표현할 것인지, 여러줄로 표현할 것인지를 지정한다.

속성	설명
flex-wrap: nowrap	flex item을 개행하지 않고 1행에 배치한다. flex-wrap 속성의 기본값이다. flex item의 폭은 flex container에 들어갈 수 있는 크기로 축소된다.
flex-wrap: wrap	flex item을 복수행에 배치한다. 기본적으로 좌에서 우로, 위에서 아래로 배치된다.
flex-wrap: wrap-reverse	flex-wrap: wrap;과 동일하나 아래에서 위로 배치된다.

2.3 flex-flow

flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 설정하기 위한 shorthand이다. 기본값은 row nowrap이다.

2.4 justify-content

flex container의 flex item 을 수평 정렬한다.

속성	설명
justify-content: flex-start;	좌측 기준으로 정렬한다. justify-content 속성의 기본값이다.
justify-content: flex-end;	우측 기준으로 정렬한다.
justify-content: center;	flex container의 중앙에 정렬한다.
justify-content: space-between;	첫번째와 마지막 flex item은 좌우 측면에 정렬되고 나머지와 균등한 간격으로 정렬된다.
justify-content: space-around;	모든 flex item은 균등한 간격으로 정렬된다.

2.5 align-items

flex item을 flex container의 수직 방향으로 정렬한다.

속성	설명
align-items: stretch;	모든 flex item은 flex container의 높이에 꽉찬 높이를 갖는다. align-items 속성의 기본값이다.
align-items: flex-start;	모든 flex item은 flex container의 cross start 기준으로 정렬된다.
align-items: flex-end;	모든 flex item은 flex container의 cross end 기준으로 정렬된다.
align-items: center;	모든 flex item은 flex container의 cross axis의 중앙에 정렬된다.
align-items: baseline;	모든 flex item은 flex container의 baseline을 기준으로 정렬된다.

2.6 align-content

이 속성은 align-items 속성과 비슷한 동작을 하지만, 플렉스 요소를 정렬하는 대신에 플렉스 라인(한 행)을 정렬합니다.

1. stretch : 기본 설정으로, 플렉스 라인의 높이가 남는 공간을 전부 차지하게 되고 flex item 의 높이가 부족하면 cross start 기준으로 뭉치게 된다.
2. flex-start : 플렉스 라인은 플렉스 컨테이너 영역의 cross start 기준으로 정렬됩니다.
3. flex-end: 플렉스 라인은 플렉스 컨테이너 영역의 cross end 기준으로 정렬됩니다.
4. center : 플렉스 라인은 플렉스 컨테이너 영역의 가운데에 정렬됩니다.
5. space-between : 첫번째 플렉스 라인은 flex container의 상단에 마지막 flex item의 행은 flex container의 하단에 배치되며 나머지 행은 균등 분할된 공간에 배치 정렬된다.
6. space-around :모든 플렉스 라인은 균등 분할된 공간 내에 배치 정렬된다.

3. Flexbox item 속성

3.1 order

flex item의 배치 순서를 지정한다. HTML 코드를 변경하지 않고 order 속성값을 지정하는 것으로 간단히 재배치할 수 있다. 기본 배치 순서는 flex container에 추가된 순서이다. 기본값은 0이다.

.flex-item  { order: 정수값; }

3.2 flex-grow

flex item의 너비에 대한 확대 인자(flex grow factor)를 지정한다. 기본값은 0이고 음수값은 무효하다.

모든 flex item이 동일한 flex-grow 속성값을 가지면 모든 flex item은 동일한 너비를 갖게되며 특정 flex item의 flex-grow 속성값을 3으로 지정하면 다른 flex item보다 더 넓은 너비를 갖는다.

.flex-item { flex-grow: 양의 정수값; }

3.3 flex-shrink

flex item의 너비에 대한 축소 인자(flex shrink factor)를 지정한다. 기본값은 1이고 음수값은 무효하다. 0 을 지정하면 축소가 해제되어 원래의 너비를 유지한다.

기본적으로 모든 flex item은 축소된 상태로 지정(기본값 1)하고 특정 flex item만 축소를 해제(flex-shrink: 0;)하면 원래의 너비를 유지한다.

.flex-item  {  flex-shrink:  양의  정수값;  }

3.4 flex-basis

flex item의 너비 기본값을 px, % 등의 단위로 지정한다. 기본값은 auto이다.

3.5 flex

flex-grow, flex-shrink, flex-basis 속성의 shorthand이다. 기본값은 0 1 auto이다.

※ W3C에서는 이 속성을 사용하는 것 보다 개별적으로 기술하는 것을 추천하고 있다.

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

3.6 align-self

align-items 속성(flex container속성으로 flex item을 flex container의 수직 방향(cross axis)으로 정렬한다.)보다 우선하여 개별 flex item을 수직 정렬한다. 기본값은 auto이다.

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

참고

---

https://poiemaweb.com/css3-flexbox

http://www.tcpschool.com/css/css3_expand_flexbox