(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)
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을 합친 모습