CSS Flex 하게

Doha Lee·2023년 3월 8일

HTML&CSS

목록 보기

5/7

Flex란?

display: flex 란 요소들을 유연하게 배치하기 위한 display 속성이다. flex를 사용하면, 부모 요소 안에서 자식 요소들이 차지하는 공간을 유동적으로 조정하고, 좌우나 상하, 가운데로 정렬할 수 있다.

Flex 속성

flex-direction

컨테이너 내에서 아이템의 주 축(main axis)를 설정한다.

row: 기본값
row-reverse: 우에서 좌 방향
column: 세로, 위에서 아래
column-reverse: 아래에서 위로

div {
	display: flex;
    flex-direction: column;
}

flex-wrap

flex 안의 아이템들이 한 줄에 다 들어가지 않을 경우, 아이템들을 여러 줄로 나눌 것인지 결정한다.

nowrap: 기본값, 한줄 배치
wrap: 여러 줄로 나누어 배치

div {
	display: flex;
    flex-wrap: wrap;
}

justify-content

컨테이너의 주 축을 기준으로 아이템들을 정렬한다. 가로 방향.

flex-start: 기본값, 시작점에 정렬
flex-end: 끝나는 지점에 정렬, 왼쪽이 시작점이면 오른쪽 끝으로 정렬
center: 가운데 정렬
space-between: 양쪽 끝 아이템들은 끝으로 배치, 그 가운데는 균등한 간격이 들어감
space-around: 아이템 주위에 균등한 가격을 둔다.
space-evenly: 아이템 사이와 주위 모두 균등한 간격을 둔다.

div {
	display: flex;
    justify-content: center;
}

align-items

flex 컨테이너의 교차 축(cross axis)를 기준으로 아이템들을 정렬한다. 세로 방향.

flex-start: 기본값, 시작점에 정렬
flex-end: 끝나는 지점에 정렬, 왼쪽 위가 시작점이면 왼쪽 아래로 정렬
center: 중앙
baseline: 아이템의 기준선
stretch: 교차 축을 채우기 위해 아이템을 그에 맞게 늘린다.

div {
	display: flex;
    align-items: flex-end;
}

align-content

flex-wrap: wrap 이 적용 되었을 경우, flex 컨테이너 내에서 여러 줄들 사이의 간격을 조절한다.

stretch: 기본값, 줄 사이의 간격을 늘린다.
flex-start
flex-end
center
space-between
space-around

div {
	display: flex;
    align-content: space-between;
}

flex-grow

아이템들이 컨테이너 내에서 차지하는 공간 비율을 정한다. 값이 클수록 많은 공간을 차지한다. 값을 0으로 줄 경우 늘어나지 않는다. 컨테이너 너비에 맞게 아이템들의 크기가 분배된다.

flex-basis:0 을 주게 되면 여백 공간이 아닌 전체 공간을 분할한다.

.container {
  display: flex;
  width: 400px;
  height: 200px;
}

.item {
  height: 100px;
  background-color: gray;
  border: 1px solid black;
  flex-grow: 1;
}

위의 경우

flex-shrink

아이템의 크기를 고정하거나 축소할 때 사용한다. 값이 클수록 적은 공간을 사용한다. 값을 0을 줄경우 줄어들지 않는다.

.container {
  display: flex;
  flex-wrap: wrap;
  width: 300px; 
  height: 200px;
}

.item {
  width: 150px;
  height: 100px;
  background-color: gray;
  border: 1px solid black;
  flex-shrink: 1;
}