🔥Flexbox
요소를 효율적이고 동적으로 배열할 수 있는 레이아웃 모델✨
1차원이며 공간이 균등하게 분산된 컨테이너 내부에 요소를 배치할 수 있음
Flexbox는 두 가지 구성 요소로 나뉨
- Flex Container : 표시를 flex 또는 inline-flex로 설정하여 상위 요소의 속성을 정의
➡ display: flex- Flex Itmes : 플렉스 컨테이너의 직계 자식
Flexbox Properties
1️⃣ Flex Container Properties
🔹 flex-direction
주측( Main Axis )과 교차축( Cross Axis )을 생각해야함💡
주축은 flex-direction 속성에 의해 정의되고, 교차축은 수직으로 진행됨✔
row가 기본 값
🔹 flex-wrap
아이템 개수 늘어나면 아이템의 크기 줄어들며 어떻게든 단일한 줄에 포함시킬 것임
하지만 flex-wrap 설정 해주면 줄 바꿈이 일어나게 됨
- nowrap( 기본값 ) : 모든 플렉스 항목이 한 줄에 표시
- wrap : 플렉스 항목은 위에서 아래로 여러 줄로 줄바꿈
- wrap-reverse : 플렉스 항목은 아래에서 위로 여러 줄로 줄바꿈
🔹 flex-flow
➕ flex-direction & flex-wrap 두 개를 같이 쓸 수 있음
➡ flex-flow: column wrap;
🔹 justify-content
주축을 따라 정렬을 의미, flex-start가 기본 값
🔹 align-items
교차축을 따라 플렉스 item이 배치되는 방식에 대한 기본 동작을 정의
🔹 align-content
align-items➡한 줄을 기준으로 정렬하는 반면
align-content➡두 줄부터 사용하는데 의미 있음⭕
2️⃣ Flex Items Properties
🔹 order
기본적으로 flex itmes는 소스 코드에 나열된 순서대로 배치
그러나 order 속성은 플렉스 컨테이너에 나타나는 순서를 제어
order 속성의 기본 값은 0
🔹 flex-grow
플렉스 박스 아이템의 기본 너비를 자동으로 늘어나거나( flex-grow )
줄어들도록( flex-shrink ) 해서 행 안에 적절한 너비로 배치되도록 맞추는 기능을 함
flex-grow➡기본 값 0, 음수 허용❌
🔹 flex-shrink
주로 레이아웃을 벗어난 아이템 너비를 분배해서 줄이는데 사용
❌flex-wrap: wrap; 속성 부여한 경우 적용❌
👉 정의하지 않거나 nowrap( 한 줄 ) 속성 부여해야함⭕
flex-shrink 속성의 기본 값 1이기에 이미 적용 되어있음
그러기에 0으로 해준 후 테스트 해보겠음
✅ 폰트 사이즈나 이런 건 못 줄임
🔹 flex-basis
flex 아이템의 기본 사이즈를 지정하는 속성
기본 값 auto이기에 설정하지 않으면 콘텐츠의 크기에 따라서 사이즈가 결정되게 됨
🔹 align-self
🔹 flex
flex-grow( 늘리기 ), flex-shrink( 줄이기 ) 및 flex-basis( 너비 컨트롤 )가 결합된 약어
✔두 세번째 매개변수( flex-shrink & flex-basis )는 선택 사항
기본 값➡0 1 auto
값 한 개일 때
- 단위 없으면 flex-frow 값
- 있으면 flex-basis 값
값 두 개일 때
- 첫 번째 값은 단위 없는 숫자여야 함( flex-grow 값 )
- 두 번째 값은 단위 없으면 flex-shrink, 단위 있거나 auto면 flex-basis
값 세 개일 때
- 첫 번째 값 flex-grow( 단위⭕ )
- 두 번째 값 flex-shrink( 단위❌ )
- 세 번째 값 flex-basis( 단위⭕ || auto )
