css flex 정리

2021-03-16

기본 구조

<div class="container">
  <div class="item">helloflex</div>
  <div class="item">abc</div>
  <div class="item">helloflex</div>
</div>

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,
자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부른다.
flex에서는 부모 요소와 바로 밑에 있는 자식 요소만 생각하면 된다. 나머지는 신경 쓰지 않아도 된다.(예를 들어 div.item 안에 있는 요소들)
flex의 속성은 컨테이너에 적용하는 속성과 아이템에 적용하는 속성이 있다.
먼저 컨테이너에 적용하는 속성부터 알아보자

컨테이너에 적용하는 속성

display: flex;

컨테이너에 display: flex;를 선언하는 것으로 시작한다.

display: block;

aaaa

bb

ccccccc
display: flex;

aaaa

bb

ccccccc
display: inline-flex;
- inline-flex은 block과 inline-block의 관계라고 생각하면 된다.
aaaa

bb

ccccccc

flex-direction

기본 축이 진행되는 방향(자식 flexbox들이 컨테이너 내부에 배치되는 방향)을 지정하는 속성 flex-direction(mdn)

row (가로, 기본값)

aaaa

bb

ccccccc
row-reverse

aaaa

bb

ccccccc
column (세로)

aaaa

bb

ccccccc
column-reverse

aaaa

bb

ccccccc

flex-wrap

아이템 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성 flex-wrap(mdn)

nowrap (부모요소 영역을 벗어나더라도 아이템 요소들을 한 줄에 배치, 기본값)

aaaa

bb

ccccccc
wrap (여러행에 걸쳐서 배치)

aaaa

bb

ccccccc
wrap-reverse (여러행에 걸쳐서 배치, 아이템 역순)

aaaa

bb

ccccccc

justify-content

메인 축의 정렬 설정

flex-start (아이템들을 시작점으로 정렬, 기본값)

aaaa

bb

ccccccc
flex-end (아이템들을 끝점으로 정렬)

aaaa

bb

ccccccc
center (아이템들을 가운데 정렬)

aaaa

bb

ccccccc
space-between (아이템들의 “사이(between)”에 균일한 간격)

aaaa

bb

ccccccc
space-around (아이템들의 “둘레(around)”에 균일한 간격)

aaaa

bb

ccccccc
space-evenly (아이템들의 사이와 양 끝에 균일한 간격)

aaaa

bb

ccccccc

align-items

수직 축의 정렬 설정

stretch (아이템들을 수직으로 끝까지 늘림, 기본값)

aaa
aaa
aaa

b

cc
cc
flex-start (아이템들을 시작점으로 정렬)

aaa
aaa
aaa

b

cc
cc
flex-end (아이템들을 끝점으로 정렬)

aaa
aaa
aaa

b

cc
cc
center (아이템들을 가운데 정렬)

aaa
aaa
aaa

b

cc
cc

align-content

flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성

stretch (아이템들을 수직으로 끝까지 늘림, 기본값)

aaaa

bb

ccccccc
flex-start (아이템들을 시작점으로 정렬)

aaaa

bb

ccccccc
flex-end (아이템들을 끝점으로 정렬)

aaaa

bb

ccccccc
center (아이템들을 가운데 정렬)

aaaa

bb

ccccccc
space-between (아이템들의 “사이(between)”에 균일한 간격)

aaaa

bb

ccccccc
space-around (아이템들의 “둘레(around)”에 균일한 간격)

aaaa

bb

ccccccc
space-evenly (아이템들의 사이와 양 끝에 균일한 간격)

aaaa

bb

ccccccc

아이템에 적용하는 속성

flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성.
flex를 지정하지 않은 아이템을 제외한 공간에서 지정한 숫자만큼 비율을 가져간다고 생각하면 됨

첫번째 아이템부터 순서대로 1 2 1 설정

aaaa

bb

ccccccc
2번째 아이템 부터 1 2 설정

aaaa

bb

ccccccc

align-self

해당 아이템의 수직축 정렬. align-items 보다 우선권이 있음. align-items의 설정을 상속 받음

2번째 아이템 : center, 3번째 아이템: flex-start

aaa
aaa
aaa

b

cc
cc

order

각 아이템의 순서 설정. 작은 숫자일 수록먼저 배치

1 2 3

aaa
aaa
aaa

b

cc
cc
2 1 3

aaa
aaa
aaa

b

cc
cc

기타

flex 를 사용하면 손쉽게 아이템을 가운데 배치 할 수 있다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

aaa
aaa
aaa

참고자료

Twitter Facebook LinkedIn