[html/css] FlexBox

 

 

[ float : left, center, right ]

- 원래의 목적은 이미지와 텍스트들을 어떻게 배치할 건지 정의하기 위한 기능이었다.

- div를 정렬하는데에만 사용하는 것은 순수 목적에 어긋나는 Hack이다. 

 

· 본론으로 FlexBox는 두 가지만 이해하면 쉽게 사용할 수 있다.

 

[ FlexBox ]

- 박스와 아이템의 행과 열을 자유자재로 배치 시킬 수 있는 유연한 기능

- Position, Float, Table은 시간이 오래 걸리고, 할 수 없는 기능이 있어서 만들 게 됨

ex ) 박스 안의 아이템들의 수직을 가운데 정렬 하는 것, 사이즈에 관계 없이 동일한 간격과 사이즈로 박스 안에 배치 하는 것, 박스를 동일한 높이로 놔두는 것은 까다로웠지만 쉽게 바뀜

 

 

① FlexBox에는 container인 박스에 적용하는 속성값과 아이템에 적용 시킬 수 있는 속성값이 존재한다. 

 

* container

- display

- flex-direction

- flex-wrap

- flex-flow

- justify-content

- align-items

- align-content

 

* item

- order

- flex-grow

- flex-shrink

- flex

- align-self

 

② FlexBox에는 중심축과 반대축이 있다.

 

---

- 사용 방법 : 사용하기 전 컨테이너 레벨에 [ display : flex; ] 지정을 해둬야한다.

 

[ flex-direction : row; ]

- row-reverse : 오른쪽에서부터 왼쪽으로 정렬

- column

- column-reverse : 아래에서 위쪽으로 정렬

※ reverse 값을 줬을 때 각각의 아이템 순서도 바뀜

 

[ flex-wrap : nowrap; ]

ex) item이 늘어나도 자동으로 한 줄에 빼곡하게 붙어 있는데 랩핑을 안 하겠다는 기본값이다.

- wrap : 아이템들이 한 줄에 꽉 차게 됐을 때 자동적으로 다음으로 넘어감 

- wrap-reverse : 위의 반대

 

[ flex-flow: ? ]

flex-flow : column nowrap; 

이렇게 위의 값을 한 번에 묶어서 사용할 수 있음

 

[ justify-content : flex-start; ]

- 중심축에서 어떻게 배치를 할지 결정

- 위에서는 아이템의 순서까지 바뀌었는데 여기서 아이템 값은 그대로 있고 배치의 정렬만 도와줌

- space-around : 간격을 띄우는데 처음과 끝의 간격이 가운데 보다 작다.

- space-evenly : 전부 똑같은 간격을 넣어 줌 

- space-between : 왼쪽과 오른쪽을 딱 화면에 맞게 배치하고 중간만 간격을 띄운다.

 

[ align-items : ? ]

- 반대축에서 어떻게 배치를 할지 결정

- center : 반대축에서 가운데에 놓이게 됨

- baseline : 아이템 중 크기가 다른 값이 있더라도 가운데 정렬을 시켜 줌

 

[ align-contents : ]

- justify-content와 비슷하지만 반대축의 아이템을 결정하게 됨 (flex-wrap : wrap)

- space-between : 아이템이 많아서 세줄 일 때 위 아래가 딱 붙어 있으면서 가운데 정렬을 시켜줌