[CSS]FlexBox

1. FlexBox
1차원으로 요소를 배치하는 방식
가로나 세로로 배치가능
다양한 방식으로 정렬가능

flex-direction
justify-conent, align-items
flex-wrap
gap
flex-grow, flex-shrink, flex-basis


2. 배치방향
flex-direction : row; 기본값 왼쪽에서 오른쪽으로 배치됨
column 위에서 아래로 배치 됨

row-reverse 오른쪽에서 왼쪽으로
column-reverse 아래쪽에서 위쪽으로 배치됨
자주 쓰이지는 않음


3. 정렬
요소가 배치되는 방향을 기본 축(Main axis)
기본 축에 수직인 방향 교차 축(Cross axis)

justify-content
기본 축 정렬

flex-end 기본축 맨 끝
flex-start 기본축 맨 앞
space-around 요소 양쪽에 똑같은 공간을 배치
space-between 양 끝에 붙이고 나눠서 배치
space-evenly 빈공간의 크기가 동일하게 배치
center 중앙 정렬

 

align-items
교차 축 정렬

center 중앙 정렬(크기를 가득 채우던 요소가 원래 크기로 변함)
flex-end 교차축 뒤쪽 정렬
flex-start 교차축 앞쪽 정렬
strech 교차축에 가득 채움(기본값)


4. 요소가 넘칠 때

flex-wrap : wrap;
넘치는 요소는 교차축 방향으로 넘어가서 배치 됨


5. 간격
gap: 원하는간격;

gap : 세로 가로;



6. 요소 꽉 채우기
flex-grow : 기본값 0
빈공간을 채울 때 사용하는 속성
남은 여백 만큼 숫자에 비례해서 늘어난다.

flex-shrink : 기본값 1
flex-shrink : 0 이면 크기가 줄어들지 않는다
플렉스 박스에서 넘어갈 경우 숫자에 비례해서 줄어든다.

flex-basis
width나 heigth를 참고하지 않고 기본크기 정해주기

flex
grow shrink basis를 축약해서 사용할 수 있다.
flex : grow값 shrink값 basis값;