CSS - display: flex 속성과 사용법

닌니디자인 CSS 썸네일

display: flex

display 속성의 값 중 하나인 "flex"는 CSS의 레이아웃을 제어 할 때 아주 유용하다. 부모 요소(이하 컨테이너)의 자식 요소(이하 아이템)들 간의 간격, 크기, 정렬 등을 편리하게 제어할 수 있습니다. flex의 속성은 컨테이너에 적용하는 속성과 아이템에 적용하는 속성이 있다.

.container {
	display: flex;
}

 

 

flex 컨테이너 속성

flex-direction

아이템들이 배치되는 축의 방향을 결정하는 속성.

.container {
	flex-direction: row;
	flex-direction: column;
	flex-direction: row-reverse;
	flex-direction: column-reverse;
}

row	가로로 배치(기본값)
column	세로로 배치
row-reverse	가로로 역순으로 배치
column-reverse	세로로 역순으 배치

 

flex-wrap

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성.

.container {
	flex-wrap: nowrap;
	flex-wrap: wrap;
	flex-wrap: wrap-reverse;
}

nowrap	줄바꿈 안함(기본값)
wrap	한줄에 여유 공간이 없으면 줄바꿈
wrap-reverse	역순으로 줄바꿈

 

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성.

.container {
	flex-flow: row wrap;
}

 

justify-content

메인축 방향으로 아이템을들 정렬하는 속성. (flex-direction이 row일 때는 가로축, column일 때는 세로축)

.container {
	justify-content: flex-start;
	justify-content: flex-end;
	justify-content: center;
	justify-content: space-between;
	justify-content: space-around;
	justify-content: space-evenly;
}

flex-start	시작점으로 정렬(기본값)
flex-end	끝점으로 정렬
center	가운데로 정렬
space-between	아이템들 사이에 균일한 간격
space-around	아이템들 둘레에 균일한 간격
space-evenly	아이템들의 사이와 양 끝에 균일한 간격

 

align-items

수직축 방향으로 아이템을들 정렬하는 속성. (flex-direction이 row일 때는 세로축, column일 때는 가로축)

.container {
	align-items: stretch;
	align-items: flex-start;
	align-items: flex-end;
	align-items: center;
	align-items: baseline;
}

stretch	아이템들이 수직축 방향으로 길이 100%
flex-start	시작점으로 정렬(기본값)
flex-end	끝점으로 정렬
center	가운데로 정렬
baseline	베이스라인 기준으로 정렬

 

align-content

flex-wrap이 wrap일때 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성.

.container {
	flex-wrap: wrap;
	align-content: stretch;
	align-content: flex-start;
	align-content: flex-end;
	align-content: center;
	align-content: space-between;
	align-content: space-around;
	align-content: space-evenly;
}

stretch	아이템들이 수직축 방향으로 길이 100%
flex-start	시작점으로 정렬(기본값)
flex-end	끝점으로 정렬
center	가운데로 정렬
space-between	아이템들 사이에 균일한 간격
space-around	아이템들 둘레에 균일한 간격
space-evenly	아이템들의 사이와 양 끝에 균일한 간격

 

 

 

---

 

flex 아이템 속성

flex-basis

아이템들이 기본 크기 설정. px, %, em, rem 등의 단위를 사용할 수 있다. 아이템의 width값이 설정 되어 있으면 flex-basis값이 우선 되고 width값이 설정 되어 있지 않으면 아이템 컨텐츠의 크기값이 우선권이 있다.

.item {
	flex-basis: 50%;
}

 

flex-grow

아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성. 기본값은 0이고 숫자값은 아이템 크기의 비율을 나타내며 컨테이너 박스에 꽉차게 배열된다.

.item {
	flex-grow: 1;
}

 

flex-shrink

아이템이 flex-basis의 값보다 작아질 수 있는지를 결정하는 속성. 기본값은 1이고 0으로 설정하면 flex-basis값 보다 작아지지 않는다.

.item {
	flex-shrink: 1;
}

 

flex

flex-grow, flex-shrink, flex-basis의 축약형 속성.

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
    
	flex: 1 0 auto;
	/* flex-grow: 1; flex-shrink: 0; flex-basis: auto; */
    
	flex: 1 200px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
}

check_circle Check

flex: 1; 이런 식으로 flex-basis를 생략해서 쓰면 flex-basis의 값은 0이 된다.

 

align-self

아이템의 수직축 방향 정렬. align-items보다 우선권이 있다.

.item {
	align-self: auto;
	align-self: stretch;
	align-self: flex-start;
	align-self: flex-end;
	align-self: center;
	align-self: baseline;
}

 

order

아이템의 배치 순서. 작은 숫자일 수록 먼저 배치 된다.

.item:nth-child(1) { order: 3; }
.item:nth-child(2) { order: 1; }
.item:nth-child(3) { order: 2; }

check_circle Check

시각적으로 순서만 바꾸는 속성이다. 스크린 리더기로 화면을 읽을 때는 의미가 없으므로 주의해야 한다.

 

z-index

position에서 z-index와 동일한 정렬 속성.

.item:nth-child(1) { z-index:1; }
.item:nth-child(2) { z-index:2; }
.item:nth-child(3) { z-index:1; }

 

 

 

---

 

참고사이트

CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN

이번에야말로 CSS Flex를 익혀보자