CSS Flex(Flexible Box) 가이드

2022.03.10

flex에 대해서 자세히 알아보자.

주로 레이아웃을 구성할때, 아이템 배치/배열을 할때 사용하고 있다.

flex 테스트 기본코드

CSS

.container {
	width: 600px;
	height: 200px;
	border: 1px solid grey;
}

.grid-box {
	display: flex;
    background-color: #efefef;
}

.item {
	padding: 1rem;
}

.item:nth-child(1) { background-color: #44C1F2;}
.item:nth-child(2) { background-color: #49D3F2;}
.item:nth-child(3) { background-color: #36D96F;}
.item:nth-child(4) { background-color: #F2CF66;}
.item:nth-child(5) { background-color: #F25430;}

HTML

<div class="container">
	<div class="grid-box">
		<div class="item">GRID 1</div>
		<div class="item">GRID 2</div>
		<div class="item">GRID 3</div>
		<div class="item">GRID 4</div>
		<div class="item">GRID 5</div>
	</div>
</div>

결과물 (display: flex)

display: inline-flex 는 아래처럼 inline-block과 유사

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; // 줄바꿈 + 역순

justify-content // 정렬방향 : 가로정렬

justify-content: flex-start; // 앞 정렬(기본값)

justify-content: flex-end; // 끝 정렬

justify-content: center; // 가운데

justify-content: space-between; // 아이템들 사이에만 갭을 주고 균일하게 정렬

justify-content: space-around; // 아이템 개별로 갭을 주고 균일하게 정렬

justify-content: space-evenly; // 아이템들 사이 갭을 공유, 양쪽 끝에도 갭을 주고 균일하게 정렬

align-items // 정렬방향 : 세로정렬

align-items: stretch; // 구성 아이템 동일하게 채움 (기본값)

align-items: flex-start; // 앞 정렬

align-items: flex-end; // 끝 정렬

align-items: center; // 중간 정렬

align-items: baseline; // 베이스라인 정렬

align-self // flex에 포함된 item 개별 아이템 정렬

.item GRID 3 기준

align-self: auto;

align-self: stretch;

align-self: flex-start;

align-self: flex-end;

align-self: center;

align-self: baseline;

align-content // 여러 행 정렬

flex-wrap: wrap; height: 100%; 조건 필요

(전체 item보다 height값이 커야만 정렬됨 )

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; // 아이템들 사이에 갭을 주고 양쪽으로 배열 (갭 공유)

flex-basis // flex > item의 기본 크기 (row일 때는 너비, column일 때는 높이)

flex-basis: auto;

flex-basis: 0;

flex-basis: 50%;

flex-basis: 100px;

flex-basis: 10rem;

flex-basis: content;

flex-grow // 유연하게 늘리기

flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다

GRID1 : flex-grow: 1;

GRID2 : flex-grow: 3;

GRID3 : flex-grow: 1;

flex-shrink // 유연하게 줄이기

flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼 만들 수 있음

flex-shrink: 0;
width: 100px;

order // 배치 순서

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

z-index // Z축 정렬 , 숫자가 클 수록 앞

GRID 3에 아래 속성 적용 시

z-index: 1;
transform: scale(2);

가운데 정렬 (Perfect Centering)

<!DOCTYPE html>
<html>
<head>
	<style>
		html,
		body {
			height: 100%;
		}

		.flex-container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			background-color: DodgerBlue;
		}

		.flex-container>div {
			background-color: yellow;
			color: black;
			width: 100px;
			height: 100px;
			line-height: 100px;
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="flex-container">
		<div>가운데</div>
	</div>
</body>

</html>