플렉스박스(Flexbox)에 대하여

230126 ver.

1. 참고 문서 & 영상

■ 문서

1. mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox - 공식문서
2. https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox - 공식문서

■ 영상

1. https://youtu.be/7neASrWEFEM - CSS Flexbox 완전 정리

■ 연습을 위한 게임

1. Flexbox Froggy

---

2. 플렉스 박스(Flex box)

■ What

• item을 행(row) 또는 열(column)로 정렬하기 위한 1차원 레이아웃(layout)방법
• item은 flex(expand)하게 움직이며 공간에 맞게 채우거나 축소된다.

 

■ 왜 Flexbox 인가?

이전에는 float(플로트)나 position(위치지정)을 통해 레이아웃(layout)을 설정했다. 그러나 많은 제한들이 있어서 레이아웃 하기에는 불편한 점이 많다.

 

 

 

======

중첩된 플렉스 박스

---

3. Flexbox의 두 가지 핵심

■ 속성

▶ container 박스와 item에 적용되는 속성

flex

- wrap, 줄바꿈 기능 / nowrap, wrap

- direction: / row, row-reverse, column, column-reverse

- flow, direction 과 wrap을 함께 설정 / nowrap, wrap, wrap-reverse

- grow

- shrink

- basis

 

item

- align-items, 플렉스 아이템이 교차축에 위치하는 위치를 설정 / stretch, flex-start, flex-end, center, baseline

- align-self, 교차축에 단독으로 위치를 설정

- align-content, 교차축에 공간이 있을 경우 flex 컨테이너 사이의 간격을 설 / flex-start, flex-end, center, space-between, space-around, stretch

 

- justify-content, 플렉스 아이템이 기본 축에 있는 위치를 설정 / start, end, center, space-around, space-between, space-evenly

- order / -1 , 0 ,1

 

■ 축(axis)

▶ 중심축과 반대축

1. 주축(main axis) : 플렉스 아이템이 배치되는 방향으로 실행되는 축
2. 교차축(cross axis) : 플렉스 아이템이 배치되는 방향에 수직인 

 

 

 

- flex grow
- flex shrink
- flex basis