比率や幅を制御するflexプロパティについて

こんにちは！AndHAコーディング部です。
今回はflex-grow、flex-shrink、flex-basisについてご紹介します。

比率を指定できる「flex-grow」について

flex-growとは

flex-growプロパティは、flexアイテムの伸び方の比率を指定する際に使用します。flex-growはflexアイテムに対して有効であるため、flexコンテナ（親要素）に display: flex; を、flexアイテム（子要素）に flex-grow をそれぞれ指定します。
以下が基本形です。

.content {
	display: flex;
}
.content-item {
	flex-grow: 0;
}

flex-growの既定値

まずは、flex-growの既定値について解説します。 flex-growの既定値は「0」のため、0を指定した場合は特に変化はありません。 以下のように、flexアイテムの横幅はそれぞれの最小の幅となります。

See the Pen flex-grow: 0; by ha-01 (@hasamplecom) on CodePen.

.content {
	display: flex;
}
.content-item {
	flex-shrink: 0;
}

.content {
	display: flex;
}
.content-item {
	flex-basis: auto;
}