[개발] CSS - Flex Box 요점 정리

안녕하세요 Devport 입니다. 이번 포스팅에서는 CSS 스타일 중 하나인 Flexible Box에 대한 사용방법에 대해서 간단하게 정리해보려고 합니다.

Flex Container

display: flex;

flex-direction (default: row)

Flex Items의 주가 되는 축을 설정합니다. 수평축 or 수직축 등..

• row:  방향으로 표시
• row-reverse:   방향으로 표시
• column:   방향으로 표시
• column-reverse:  방향으로 표시

flex-wrap (default: nowrap)

Items의 여러 묶음을 설정합니다.

• nowrap:  줄바뀜이 되지 않고 영영을 벗어날수 있음
• wrap:  Items를 여러 줄로 묶음 (Item들이 컨테이너의 범위를 넘어서게 되려 할때 다음줄로 개행)
• wrap-reverse:  Items를 wrap의 역 방향으로 여러 줄을 묶음

flex-flow [flex-direction: row][flex-wrap: nowrap]

flex-direction과 flex-wrap를 한번에 설정할 수 있습니다.

justify-content  (↔)

메인 축을 기준으로 하여 정렬 방법을 설정합니다.

• flex-start: item들을 시작점으로 정렬 (default)
• flex-end:   item들을 끝점으로 정렬
• center:  item들을 가운데로 정렬
• space-between:  item사이에 균등하게 간격을 넣습니다.
• space-around:  item둘레에 균등하게 간격을 넣습니다.
• space-evenly: item사이와 양끝에 균등하게 간격을 넣습니다. (IE는 미지원)

align-items (↕) (default: stretch)

수직 축을 기준으로 하여 정렬 방법을 설정합니다.

• stretch: item들을 수직 방향으로 늘림
• flex-start:  item들을 시작점으로 정렬
• flex-end: item들을 끝점으로 정렬
• center: item들을 가운데로 정렬
• baseline:  item들을 텍스트의 baseline 기준으로 정렬

align-content (↕) (default: stretch)

flex-wrap 속성을 통해 Item이 여러 줄이고 여백이 있을 경우에 정렬됩니다.

• stretch: Container의 교차 축을 채우기 위해 item을 늘림
• flex-start: item들을 시작점으로 정렬
• flex-end:  item들을 끝점으로 정렬
• center:  item를 가운데로 정렬
• space-between:  item사이에 균등하게 간격을 넣습니다.
• space-around:  item둘레에 균등하게 간격을 넣습니다.

Flex Box

flex-basis (default: auto)

item의 기본 너비 설정, flex 아이템의 기본 크기를 설정(flex-direction이 row일땐 width, column일땐 height)

auto가 기본값이지만 width, height 단위의 수를 사용, "content" 사용시 컨텐츠의 크기로 적용됨

• auto: 가변 Item과 같은 너비
• 단위: px, em, cm 등의 단위로 지정

flex-grow (default: 0)

item의 증가 너비 비율을 설정, 숫자가 커지면 증가시에 더 많은 너비가 증가합니다. 0일 경우 증가 하지 않습니다.

• 숫자: item의 증가 너비 비율을 설정

flex-shrink (default: 1)

item의 감소 너비 비율을 설정, 숫자가 커지면 더 많은 너비가 감소합니다. 0일 경우 감소 하지 않습니다.

flex-basis의 값의 이하일 경우에 실행되며 0값일 경우 감소 하지 않아 고정되게 됩니다.

• 숫자: item의 감소 너비 비율을 설정

flex [flex-grow: 0] [flex-shrink: 1] [flex-basis: auto]

item의 기본, 증가, 감소에 대한 너비를 설정하는 속성입니다.

 

align-self (default: auto)

교차 축에서 개별 Item의 정렬 방법을 설정합니다.

• auto: Container의 align-items 속성을 상속
• stretch: Container의 교차 축을 채우기 위해 item을 늘림
• flex-start: item을 시작점으로 정렬
• flex-end: item을 끝점으로 정렬
• center: item을 가운데로 정렬
• baseline: item들을 텍스트의 baseline 기준으로 정렬