FLEXBOX 레이아웃 속성 정리

Flexbox 모델을 사용하기위해서는 flex-container를 정의 한다음 

display:flex 또는 display:inline-flex 설정하면된다. 

<ul> <!--parent element-->
  <li></li> <!--first child element-->
  <li></li> <!--second child element-->
  <li></li> <!--third child element-->
</ul>

1. Flexbox 컨테이너와 Flexbox 아이템 

ul에 display:flex 속성을 준경우 Flex Container 라고하며 , ul 내부에 있는 li 앨리먼트들을 Flex Container 내부에 있는 Flexbox Item 이라고 한다. 이때 주의할점은 Flexbox item이되는것들은 <li>요소들이며 li요소내부는 적용이 되지 않는다는 점이다.  FlexBox Item 항목에 height값을 주지 않으면 기본값이 stretch 라 컨테이너를 꽉 채우게된다. 

2. flexbox 주축과 교차축 

flexbox에는 주축(Main Axis)과 교차축 (Cros Axis) 이라는 두 개의 축이 존재한다. 

 flex-direction 디폴트값은 row(행)이므로  주축은 (Main Axis)는 행값을 기준으로 한다. cross axis라고 하면 주축에 정확히 교차하는 교차축을 얘기한다. 

여기서 flex-direction 값을 column(열)로 바꾸면 주축과 교차축에 값이 아래와 같이 반대로 바뀐다. 

3.justify-content 

 justify-content 주축에(Main Axis) 대한 정렬이다. 

space-between a, b 사이의 공간 b, c 사이를 동일한 간격으로 위치시킨다. 반면에  space-around는 a, b, c 사이의 공간을 동일하게 둘러싸는 것을 얘기한다. 즉 space-between 은 박스와 박스 사이에서만 공간이 생기지만 space-around인경우는 블록과 박스 박스와 박스 사이에 균등하게 공간이 생긴다. (공간을 둘러싼다는게 어떤느낌인지 와닿지가 않아서 처음에 이해하기 힘들었음)

justify-content 속성중 space-evenly 사용하면, 블록과 a,b,c 공간이 모두 균등하게 위치할 수 있다.

4.flex-wrap (nowrap, wrap, wrap-reverse)  

flexBox에서는 기본적으로 박스의 크기가 넘칠경우 박스 공간을 뚫고 나가는 식으로 레이아웃이 배치가된다. (flex-wrap:nowrap 디폴트값이므로)

부모 컨테이너 속성에 flewx-wrap : wrap  속성을 사용할경우 박스공간 아래로 항목들이 자동으로 떨어진다. 

flexBox인경우 width값에 상관없이 부모컨테이너에 항목을 넘어가더라도 flex Item이 자동으로 정렬되게 되는데 이는 flex-shrink 값이 1이 기본으로 설정되어 있기 때문이다. 

5. flex-basis

flexBox에서 width 값대신에 flex-basis 속성을 사용하여 값을 적용한다. 

 6.flex-grow & flex-shrink 

flexItem 항목을 늘려주거나 줄여줄때 사용하는 속성이 flex-grow, flex-shrink 이다. 

flex : flex-grow , flex-shrink, flex-basis  형태로 축약해서 쓸 수 있다.

7. align-content 

align-content 는 교차축에 대한정렬이다.  속성으로는 flex-start, flex-end, center, space-between, space-around, stretch.

flex-item 덩어리 전체가 교차축을 기준으로 정렬이 된다. 

8.align-items

align-content 와는 다르게 개별 아이템항목을 정렬할때 사용하는 속성이 align-items 이다. align-items 역시 교차축 기준으로 상 하 가운데 설정할 수 있다. 

가운데 정렬을 하기위해서는 justify-content속성과 align-items 속성을 사용할 수 있다.

9. order

order 속성을 사용하면 flexItem 항목을 순서를 변경할 수 있다.

10. align-self 

flexItem 개별 속성을 정렬할때 사용하는 속성이 align-self 이다. 요소 값은 align-items가 사용하는 값들을 인자로 받는다. 

11. flex-flow

참고 원문

FlexBox기본개념

FlexBox 이해