CSS Flexbox

박채연·2022년 11월 16일

CSS

목록 보기

3/3

flexbox 설정방법

설정하고 싶은 요소들이 들어있는 박스 태그에 display : flex;를 선언한다.

.container {
  display: flex;
}

기본 축 방향 설정

flex-direction

flex-direction : row(기본값) 왼쪽에서 오른쪽으로 정렬
flex-direction : row-reverse 오른쪽에서 왼쪽으로 정렬
flex-direction : column 위에서 아래로 정렬
flex-direction : column-reverse 아래에서 위로 정렬

줄 바꿈 설정

flex-wrap

flex-wrap : nowrap(기본값) 한 줄에 정렬
flex-wrap : wrap 위에서 아래로 자동적으로 줄 바꿈
flex-wrap : wrap-reverse 아래에서 위로 자동적으로 줄 바꿈

축 방향과 줄 바꿈 한 번에 설정

flex-flow : direction 속성 값 + wrap 속성 값

예) flex-flow : column wrap, flex-wrap : row-reverse wrap-reverse

주 축 방향 설정

justify-content

flex-start : Items를 시작점(flex-start)으로 정렬
flex-end: Items를 끝점(flex-end)으로 정렬
center: Items를 가운데 정렬
space-between: 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around: Items를 균등한 여백을 포함하여 정렬

교차 축 설정

align-content
주의할 점은 flex-wrap 속성을 통해 Items가 여러 줄(2줄 이상)이고 여백이 있을 경우만 사용할 수 있습니다.

stretch: Container의 교차 축을 채우기 위해 Items를 늘림
flex-start: Items를 시작점(flex-start)으로 정렬
flex-end: Items를 끝점(flex-end)으로 정렬
center: Items를 가운데 정렬
space-between: 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬
space-around: Items를 균등한 여백을 포함하여 정렬

교차 축에서 Items의 정렬 방법

Items가 한 줄일 경우 많이 사용합니다.
주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선
따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정

stretch: Container의 교차 축을 채우기 위해 Items를 늘림
flex-start: Items를 각 줄의 시작점(flex-start)으로 정렬
flex-end: Items를 각 줄의 끝점(flex-end)으로 정렬
center: Items를 가운데 정렬
baseline: Items를 문자 기준선에 정렬

order

Item의 순서를 설정
Item에 숫자를 지정하고 숫자가 클수록 순서가 밀립니다.
음수가 허용
기본값이 0

flex

Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성

flex-grow Item의 증가 너비 비율을 설정 (기본값 0)
flex-shrink Item의 감소 너비 비율을 설정 (기본값 1)
flex-basis Item의 (공간 배분 전) 기본 너비 설정 기본값( auto)

.item {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용) */

flex-grow

Item의 증가 너비 비율을 설정
숫자가 크면 더 많은 너비를 가집니다.
Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다.

align-self

필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우 align-self를 사용할 수 있다.
이 속성은 align-items 속성보다 우선. auto: Container의 align-items 속성을 상속받음 auto
stretch: Container의 교차 축을 채우기 위해 Item을 늘림
flex-start: Item을 각 줄의 시작점(flex-start)으로 정렬
flex-end: Item을 각 줄의 끝점(flex-end)으로 정렬
center: Item을 가운데 정렬
baseline: Item을 문자 기준선에 정렬