CSS 플렉스 박스를 이용한 타일 레이아웃

이제 플렉스박스를 이용해 타일 레이아웃을 만들어 봅시다. 먼저 플렉스 블록을 한 줄에 세 개씩 여러 줄로 배치해 보겠습니다.

이를 위해 플렉스의 부모 요소에 너비를 300px로 설정하고 flex-wrap 값을 wrap로 설정한 후, 자식 요소의 너비를 100px로 설정합니다:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 300px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

이제 블록 사이에 수평 간격을 만들어 봅시다. 이를 위해 여백을 위한 추가 공간을 주기 위해 부모 요소의 너비를 늘립니다.

한 줄에 세 개의 블록이 있으므로, 블록 사이에는 두 개의 간격이 생깁니다. 각 간격의 너비를 10px로 하고 싶다고 가정해 보겠습니다. 결국 부모 요소의 너비는 20px만큼 늘어나야 하므로, 300px가 아니라 320px로 설정해야 합니다.

이제 블록의 부모 요소에 justify-content를 값 space-between로 설정하여 블록 사이에 원하는 간격을 얻어 봅시다:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

이제 블록 사이에 동일한 간격을 수직으로도 추가해 봅시다. 이를 위해 align-content 속성을 값 space-between로 설정할 수 있습니다.

그러나 이를 위해서는 부모 요소의 높이를 설정해야 합니다. 그렇지 않으면 align-content가 작동하지 않습니다. 높이를 320px로 설정해 봅시다. 이 경우 100px 높이의 블록이 세 줄과 줄 사이의 10px 간격 두 개가 정확히 들어맞습니다.

실행해 봅시다:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
	<div class="child">9</div>
</div>

.parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: space-between;
	flex-wrap: wrap;
	width: 320px;
	height: 320px;
	border: 1px solid red;
}
.child {
	box-sizing: border-box;
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

모든 것이 훌륭하게 작동하지만, 몇 가지 문제점이 있습니다. 이에 대해서는 다음 강의에서 살펴보겠습니다.