(HTML, CSS) Flex Box 이해하기(flex-direction, flex-wrap, flex-flow)

Flex Box를 배우려고 한 이유

 

Flex Box는 Box와 Item들을 행과 열로 자유롭게 배치할 수 있는 CSS의 꽃이라고 할 수 있다.

웹사이트의 레이아웃을 구성하는데 대부분을 Flex Box를 사용하면 좋다고 멘토님께 들었다.

그전에 내가 만든 웹사이트는 Flex Box를 쓰지 않고 죄다 position, float를 이용하여 때려 넣었는데

그러다 보니 하나의 아이템 수정 시 다른 부분이 틀어지는 일도 많았고, 코드 양도 많았다.

멘토님께서 Flex Box를 쓰면 코드를 줄일 수 있고, 자유롭게 배치할 수 있는 이점이 있어서

무조건 필수적으로 알아야 한다고 했다.

 

그래서 정리해보는 Flex Box 내용이다.

---

Flex Box의 이해 

1. container 박스에 적용되는 속성이 존재한다.

2. 각 item들에 적용할 수 있는 속성 값이 존재한다.

 

flex가 적용되는 컨테이너의 속성 값

 1. display

 2. flex-direction

 3. flex-wrap

 3. flex-flow

 4. justify-content

 5. align-items

 6. align-content

 

Item에 지정되는 속성 값

 1. order

 2. flex-grow

 3. flex-shrink

 4. flex

 5. align-self

 

flex-direction / 열과 행 정렬

1. flex-direction: row  ▶ 왼쪽 열 정렬

2. flex-direction: row-reverse  ▶ 오른쪽 열 정렬

3. flex-direction: column 의 모습 당연히 reverse도 똑같이 적용된다. (column-reverse)

column정렬

flex-wrap / 페이지 사이즈에 맞게 지정.

1. flex-wrap: nowrap ▶ 기본값 nowrap, 사이즈를 줄일 경우 사이즈가 줄어든다(찌부된다고 이해하면 쉬움)

2. flex-wrap:wrap ▶ 사이즈를 줄일 경우 지정 사이즈를 넘으면 아이템들이 밑으로 이동 

 

flex-flow /  flex-direction과 flex-wrap을 합치다.

1. flex-flow: column nowrap; 

flex-drirection: row + flex-wrap: wrap을 합친 모습