Flexbox Layout

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

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

자식 요소을 부모 요소 내에서 정렬하기 위해서는 각 자식 요소의 너비를 %로 지정하는 등 번거로운 처리가 필요하다.

Flexbox를 사용하면 기존에 방식에 비해 매우 간단히 레이아웃을 처리할 수 있다.  <- 부모요소에 display : flex;

Flexbox의 장점을 정리해 보면 아래와 같다.

1줄의 코드 추가로 수평 정렬이 가능하다.
요소의 상하좌우 정렬, 순서 변경이 간단하다.
요소가 간격 조절이 간단하다.
서로 다른 height를 갖는 요소의 수평정렬 시, 간단히 상하중앙 정렬이 가능하다.

Flexbox 레이아웃은 flex item이라 불리는 복수의 자식 요소와 이들을 내포하는 flex-container 부모 요소로 구성된다.

flexbox를 사용하기 위해서 HTML 부모 요소의 display 속성에 flex를 지정한다.

부모 요소가 inline 요소인 경우 inline-flex을 지정한다.

└flex 또는 inline-flex는 부모 요소에 반드시 지정해야하는 유일한 속성이며 자식 요소는 자동적으로 flex item이 된다.

 

Flexbox container 속성
1.flex-direction

flex-direction 속성은 flex 컨테이너의 주축(main axis) 방향을 설정한다.

flex-direction : row(좌->우 수평), row-reverse(반대), column(위->아래 수직), column-reverse(반대)

 

2.flex-wrap

flex-wrap 속성은 flex 컨테이너의 복수 flex item을 1행으로 또는 복수행으로 배치한다.

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

flex-wrap : nowrap(개행x 1행배치= 기본값, container에 들어갈 수 있는 크기로 축소된다.                                           하지만 item들의 width합이 container의 width를 넘으면 넘치는데 overflow:auto를 지정하면 스크롤이생기며 안넘친다.
flex-wrap : wrap(item 들의 width합이 container의 width보다 큰 경우 복수행에 배치한다 기본적으로 좌->위 위->아래배치
flex-wrap:wrap-reverse = wrap과 동일하나 아래에서 위로 배치된다.
3.flex-flow

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

ex) flex-flow : column wrap-reverse;

 

4.justify-content

flex container의 main axis를 기준으로 flex item을 수평 정렬한다.

justify-content : flex-start = main start(좌측)를 기준으로 정렬한다 = 기본값
justify-content : flex-end = main end(우측)를 기준으로 정렬한다 
justify-content : center = 중앙 정렬
justify-content : space-around = item들이 균등한 간격으로 정렬된다.
justify-content : space-between = 첫번째와 마지막 flex item은 좌우 측면에 정렬되고 나머지와 균등한 간격으로 정렬된다.
5.align-items

flex item을 flex container의 수직 방향(cross axis)으로 정렬한다. align-items 속성은 모든 flex item에 적용된다.

align-items : stretch = 모든 flex item은 flex container의 높이(cross start에서 cross end까지의 높이)에 꽉찬 높이를 갖는다. align-items 속성의 기본값이다.
align-items : flex-start = 모든 flex item은 flex container의 cross start(위쪽) 기준으로 정렬된다.
align-items : flex-end = 모든 flex item은 flex container의 corss end(아래쪽) 기준으로 정렬된다.
align-items ; center = 모든 flex item은 flex container의 cross axis의 중앙에 정렬된다.
align-items : baseline = 모든 flex item은 flex container의 baseline을 기준으로 정렬된다.

baseline에 대한 설명인데 content에 따라 정해지는 것이 baseline이다.

 

6. align-content

flex container의 cross axis를 기준으로 flex item을 수직 정렬한다.

참고로 justify-content 속성은 flex container의 main axis를 기준으로 flex item을 수평 정렬한다.

align-content : stretch = 모든 flex item은 flex item의 행 이후에 균등하게 분배된 공간에 정렬되어 배치된다. 기본값
align-content : flex-start = 모든 flex item은 flex container의 cross start 기준으로 stack 정렬된다. <- 아랫줄과 윗줄간의 margin x
align-content : flex-end = 모든 flex item은 flex container의 cross end 기준으로 stack 정렬된다. <-신기한게 마지막 item이 아래 붙는 형태로 나타남
align-content : center = 모든 flex item은 flex container의 cross axis의 중앙에 stack 정렬된다.
align-content : space-between = 첫번째 flex item의 행은 flex container의 상단에 마지막 flex item의 행은 flex container의 하단에 배치되며 나머지 행은 균등 분할된 공간에 배치 정렬된다.
align-content : space-around = 모든 flex item은 균등 분할된 공간 내에 배치 정렬된다.
Flexbox item 속성
**float, clear, vertical-align 속성은 flex item에 영향을 주지 않는다.

 

1.order 

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

 

2. flex-grow

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

**모든 flex item이 동일한 flex-grow 속성값을 가지면 모든 flex item은 동일한 너비를 갖는다. 

 

3.flex-shrink

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

 

4. flex-basis

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

ex) flex-basis : auto | <width>;

 

5. flex

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

 

6. align-self

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