CSS flex 요소의 제로 그리드

어떤 요소의 flex-grow가 0이면, 그 요소는 자유 공간 분배에 참여하지 않습니다. 기본적으로 그리드 값은 0이므로, flex-grow가 설정되지 않은 요소들은 서로 자유 공간을 나누지 않습니다.

예를 들어 계산을 해보겠습니다. 너비가 각각 100px인 세 개의 flex 요소가 있다고 가정합시다. 첫 번째 요소는 flex-grow가 없거나(또는 0), 두 번째 요소의 flex-grow는 2, 세 번째 요소는 3이라고 해봅시다.

부모의 너비가 500px이라고 가정합니다. 그러면 자유 공간은 200px이 되고, flex-grow 한 단위당 200px / 5 = 40px이 할당됩니다. 결과적으로, 분배에 참여하지 않는 첫 번째 요소의 너비는 여전히 100px로 유지되고, 두 번째 요소의 너비는 100px + 2 * 40px = 180px, 세 번째 요소의 너비는 100px + 3 * 40px = 220px가 됩니다.

실습 문제

아래의 모든 문제에서는 너비와 flex-grow를 가진 flex 요소로 구성된 코드가 제공됩니다. 제공된 코드를 기반으로 각 요소가 가지게 될 크기를 계산해 보세요. 그런 다음 코드를 실행하고 실제 요소 너비를 측정하여 계산을 확인하세요.

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 100px;
	flex-grow: 1;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 900px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 300px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 3;
}
.elem3 {
	width: 100px;
	flex-grow: 2;
}

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
	<div class="child elem4">4</div>
</div>

.parent {
	display: flex;
	width: 700px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 200px;
	flex-grow: 0;
}
.elem2 {
	width: 200px;
	flex-grow: 0;
}
.elem3 {
	width: 100px;
	flex-grow: 1;
}
.elem4 {
	width: 100px;
	flex-grow: 1;
}