CSS에서 자동 너비 블록을 사용한 타일 레이아웃

이전 강의에서 우리가 만든 타일 레이아웃에서는 요소의 너비와 간격의 합이 부모 요소의 너비와 정확히 일치해야 했습니다. 이 방법은 다소 범용적이지 않습니다. 이제 요소들이 부모 요소의 너비에 자동으로 맞춰지도록 만들어 보겠습니다.

다음과 같은 부모 요소가 있다고 가정해 봅시다:

.parent {
	display: flex;
	flex-wrap: wrap;
	width: 800px;
	margin: 50px auto;
	border: 1px solid red;
}

이 타일 레이아웃의 요소들이 한 줄에 4개의 블록으로 배치된다고 해보겠습니다:

.child {
	box-sizing: border-box;
	width: 200px;
	height: 100px;
	border: 1px solid green;
}

각 블록이 부모 요소 너비의 4분의 1을 차지하도록 블록 너비를 설정해 보겠습니다. 이를 위해 크기를 25%로 설정합니다:

.child {
	box-sizing: border-box;
	width: 25%;
	height: 100px;
	border: 1px solid green;
}

블록의 너비를 퍼센트로 설정하여 타일 레이아웃에서 한 줄에 세 개의 블록이 오도록 만드세요.

블록의 너비를 퍼센트로 설정하여 타일 레이아웃에서 한 줄에 두 개의 블록이 오도록 만드세요.

블록의 너비를 퍼센트로 설정하여 타일 레이아웃에서 한 줄에 하나의 블록이 오도록 만드세요.