Flex box

💡 정렬의 끝판왕

flex box 그자체로 완벽하다

How it works 보다는 🔥 How to use it 🔥

🏹 Sequence

1. flex box의 선언
2. 가로 정렬? 세로 정렬?
3. 무조건 한 줄 안에 다 정렬?
4. flex box를 이용한 정렬

✍️ Step1. flex box의 선언

display: flex or inline-flex
flex = block inline-flex-inline-block

부모에게 플렉스 값을 준다 !

정렬하고자 하는 요소를 감싸는 부모에게 display: flex

✍️ Step2. 가로 정렬? 세로 정렬?

flex-direction: row(가로) / column(세로)
flex를 정의하면 Axis가 생긴다 ( 형태가 달라짐 )

flex-direction: row;

• Main axis ➡️
• Cross axis ⬇️

flex-direction: column;

• Main axis ⬇️
• Cross axis ➡️

flex-direction: row-reverse;

• Main axis ⬅️
• Cross axis ⬇️

flex-direction: column-reverse;

• Main axis ⬆️
• Cross axis ➡️

✍️ Step3. 무조건 한 줄 안에 다 정렬?

• flex-wrap: nowrap (줄 바꿈)
  감싸지 않고 자식의 사이즈를 줄여서 라도 한 줄로 정렬해버리는방법
• flex-wrap: wrap
  한 줄에 모두 정렬하기에 공간이 넉넉하지 않으면 여러 줄을 만들어 버리는 방법

✍️ Step4. flex box를 이용한 정렬

- justify-content

Main-axis 축으로 정렬

- align-items, align-content

Cross axis 축으로 정렬

flex-start: 시작점부터 정렬한다.
flex-end: 끝부터 정렬한다.
center: 가운데로 정렬한다.
space-between: 사이 간격을 같게 정렬한다.
space-around: 요소를 감싸는 간격을 같게 정렬한다.

cross axis 축으로 정렬을 할 때,
align-items: 각각의 flex line을 기준으로 정렬하고 싶을 때
align-content: 전체의 cross aixis 기준으로 정렬하고 싶을 때

선 align-items 후 align-content
(80%는 가능하다)

✍️ order!

순서를 바꿔준다.

✍️ flex-grow

나머지 공간을 차지할지 설정한다.
flex-grow: 1;

✍️ flex-shrink

flex item의 축소에 관련된 속성이다.
flex-shrink: 0; // 자기 사이즈 보다 줄어들지 않는다