css. FlexBox (display: flex) - (上)

FlexBox

 

 

💡 key points

 

dispaly: flex 선언

가로정렬? 세로정렬? (flex-direction)

무조건 한줄안에 다 정렬? (flex-wrap)

아이템 정렬(align-items, justify-contents)

 

 

 

---

 

1 / 플렉스박스 사용 선언

 

- 정렬하고자 하는 요소를 감싸는 부모(=container)에게 선언함.

 

display: flex;

혹은

display: inline-flex;

 

flex도 우선은 'box'의 타입이다. 

inline-flex는 인라인블럭과 비슷하게 동작함.

 

 

 

 

2 / 가로 or 세로 정렬 (flex-direction)

가로	row(default)
세로	column

 

+) 그 외에도 row-reverse와 column-reverse가 있다.

 

flex를 하면 두개의 축이 자동으로 생김. (눈에 보이지는 x)

flex-direction이 무엇이냐에 따라서 축의 위치가 달라진다.

 

 

두개의 축 존재

flex-direction에 따라 main 축이 생기고, (default, 즉 row일땐 좌우로)

main축의 수직으로 cross축이 생긴다.

 

만약 reverse가 붙으면 main 축이 좌->우가 아닌 좌<-우가 된다!

 

 

 

 

 

 

3 / 무조건 한줄안에 다 정렬? (flex-wrap)

 

 

 

1. nowrap

flex-wrap: nowrap

- wrap 하지 않고, 자식의 사이즈를 줄여서 한줄로 정렬해버림.

 

 

2. wrap

flex-wrap: wrap

- wrap해서 만약 한줄에 정렬할 수 없으면 여러줄을 만듬.

(자식의 사이즈가 줄어들지 않음)

 

 

 

 

 

 

---

 

ref.

 

flex - CSS: Cascading Style Sheets | MDN

 

+) reference lecture

김버그의 HTML&CSS는 재밌다 - 구름EDU