Flexbox

flex

display: flex 는 부모 박스요소에 적용하며 적용하면 자식 요소들이 왼쪽에서 차례대로 이어 배치됩니다.

자식요소는 flex 라는 속성에 값을 적용합니다

flex: <grow> <shrink> <basis> // 순서대로 팽창지수, 수축지수, 기본크기

// ex
flex: 0 1 auto; // (기본값)

flex-direction

flex-direction 은 수직 수평 방향을 정합니다

row (기본값) = 수평

column = 수직

flex-grow

자식요소의 grow값 / 전체 자식요소가 가진 grow의 합 만큼 공간을 차지합니다

마치 비율처럼요

flex-shrink

flex-grow 와는 반대로 비율만큼 차지하는 크기가 작아집니다

flex-basis 에 따른 비율으로 실제 크기를 가늠하기 어렵기에 잘 쓰이지 않습니다

그래서 기본값 1로 두는 경우가 대부분입니다

flex-basis

자식 박스에 기본적인 크기입니다

width 와 flex-basis 를 동시에 사용하는 경우 flex-basis 가 우선됩니다

justify-content

콘텐츠 수평 정렬하는 속성입니다

자식 박스를 수평으로 정렬합니다

주요 옵션

• flex-start: 시작
• flex-end: 끝
• center: 가운데
• space-between: 아이테들 사이에 균일한 간격을 만들어줌
• space-around: 아이템들의 둘레에 균일한 간격을만들어줌
• space-evenly: 아이템들의 사이와 양 끝에 균일한 간격을 만들어줌

align-items

콘텐츠 수직 정렬하는 속성, 자식 박스를 수직으로 정렬합니다

주요 옵션

• flex-start: 시작
• flex-end: 끝
• center: 가운데
• stretch(기본값): 아이템들이 수직축 방향으로 끝까지 쭉 늘어남
• baseline: 아이템들을 텍스트 베이스라인(알파벳 밑줄) 기준으로 정렬