CSSにおけるフレックスブロックの圧縮係数

前のレッスンでは、フレックス要素に十分なスペースがない場合、それらが圧縮され始めることを確認しました。合計幅が親要素の幅をどれだけ超えているかを、負の余白スペースと呼びます。

技術的に、圧縮とは各要素の幅から一部分を削り取り、すべての要素が親要素内に収まるようにすることを意味します。

計算を行ってみましょう。たとえば、幅200pxの要素が4つあるとします。この場合、親要素の幅は700pxです。つまり、要素の合計幅は次のようになります：

200px * 4 = 800px

これは親要素の幅より100px大きいです。各要素からどれだけ削り取れば、要素が親要素内に収まるか計算してみましょう：

100px / 4 = 25px

つまり、要素の幅は次のようになります：

200px - 25px = 175px

説明されたブロックを実装し、測定によって要素の幅が実際に計算した値と等しいことを確認してください。

ブロックの幅を計算し、その後測定で計算を確認してください：

<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: 200px;
	height: 200px;
	border: 1px solid red;
}
.child {
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	width: 100px;
}
.elem2 {
	width: 100px;
}
.elem3 {
	width: 100px;
}