css - flexbox

배치할 방향 : flex-direction 

정렬하기 : justify-content, align-items 

요소가 넘칠 때 : flex-wrap 

요소 간격 : gap 

크기 늘이거나 줄이기 : flex-grow, flex-shrink, flex-basis, flex-direction 

 

display : flex - 요소가 세로로 정렬 (따로 적어주지 않아도 flex-direction : row 가 default로 적용) 

- flex-direction : column - 위에서 아래로 정렬. 보이기로는 같아 보이나 일반 디스플레이 블록과 차이가 있다. 

- flex-direction : row-reverse - 오른쪽에서부터 왼쪽으로 세로정렬 

- flex-direction : column-reverse - 아래쪽에서부터 위로 정렬

 

요소가 넘칠 때

flex-wrap: wrap - 넘어가는 요소를 다음 라인으로 넘길 수 있음. flex-direction에 따라 방향이 달라짐

간격

gap : 10px 20px; - 교차축과는 상관 없이 세로, 가로 간격을 뜻함

 

요소를 꽉 채우기

flex-grow : 요소를 늘릴 때. 기본값은 0이고, 상대비교를 통해 높은 숫자일수록 많이 늘어남

-> 요소를 늘릴 때 주로 사용.flex-grow:2;

flex-shrink : 요소를 줄일 때. 기본값은 1이고, 상대비교를 통해 높은 숫자일수록 많이 줄어듦

-> 요소를 원하는 대로 고정하고 싶을 때 0값을 주어 사용.

flex-basis 속성

flex-basis : 기본 축의 방향이 가로방향이면 width를, 세로 방향이면 height를 참고해서 시작 크기를 정함

flex: 1 0 100px; 순서대로 flex-grow, flex-shrink, flex-basis 값