display: flex; 개념

display: flex;

: 부모 요소를 flex로 지정하고 자식 요소를 한 줄로 정렬하는 방식

inline, inline-block은 글자처럼 취급되지만
flex는 가로, 세로 직접 정렬을 지정할 수 있음

display: flex;의 특징

1. flex-direction: row;
   row가 기본값(가로정렬), column(세로정렬)으로 지정가능

2. 주축과 교차축이 존재함
   row일 때 : 주축-[ 가로 ], 교차축-세로
   column일 때 : 주축-[ 세로 ], 교차축-가로

3. 주축을 정렬할 때 : justify-content
   교차축을 정렬할 때 : align-items

4. 간격 관리가 쉬움
   gap을 사용하면 된다. (자식 요소 사이의 여백)

5. flex-grow
   컨테이너에 공간이 남아있을 때 늘어날 비율
   *기본값: 0 (늘어나지 않음) / 1로 변경한다면 최대한으로 늘어남

.bottom_box { 
	flex-grow: 0;
}

figma를 구현할 때 flex 많이 사용함 !

---

코딩 구현 -> 리팩토링 -> 구현 -> 리팩토링 ...
중간에 계속 정리하는 습관 가지기