CSS

The CSS flex property is a shorthand for defining the flexibility, shrinkability, and the basic size of a flex item all at once.

flex

　CSSの flexプロパティは、ウェブページ上の要素がどのように伸び縮みするか、またどのように配置されるかを決めるためのものです。これは、「フレックスボックス」というレイアウト技術の一部であり、要素をより柔軟に、そして予測可能な方法で配置することができます。flexプロパティを使うと、要素の幅や高さがその親要素に応じてどのように変化するかを制御できます。

　flexプロパティは３つの値を持つことができます。それは「flex-grow」、「flex-shrink」、「flex-basis」です。

  1. flex-growは、余分なスペースがある場合に、その要素がどれだけそのスペースを埋めるかを決定します。たとえば、flex-growが 2 の要素は、flex-growが 1 の要素よりも２倍の余分なスペースを取ります。この値が大きいほど、より多くのスペースを占めることになります。
  2. flex-shrinkは、逆にスペースが足りない場合に、要素がどれだけ縮小するかを定義します。この値が大きい要素は、スペースが限られているときにより多く縮小します。つまり、スペースが足りなくなった時にどのように調整するかをこの値で制御します。
  3. flex-basisは、要素の初期サイズを指定します。これは幅（横のレイアウト）または高さ（縦のレイアウト）に相当しますが、フレックスボックス内での要素の基本的なサイズを設定すると考えることができます。この値があると、その要素は指定されたサイズから始まり、必要に応じて拡大または縮小します。

　これら３つの値は通常、ショートハンド（短縮形）である flexプロパティを使って一度に設定されます。例えば、flex: 1 1 10% という記述は、flex-growの値が 1、flex-shrinkの値が 1、flex-basisの値が 10% であることを意味します。

　この柔軟な配置システムにより、デザイナーや開発者は、画面のサイズが変わっても適切に調整される、応答性の高いレイアウトを簡単に作成できます。フレックスボックスを使うことで、中央揃え、スペースの均等分配、動的なサイズ調整など、以前は難しかったレイアウトを実現することが可能になります。

Sample 1 : flex-grow Difference

　このサンプルでは、flex-growの違いを示します。１つ目のアイテムは余分なスペースを他のアイテムよりも多く取るようになります。

1
2
3

HTML

<div class="container">
	<div class="item item1">1</div>
	<div class="item item2">2</div>
	<div class="item item3">3</div>
</div>

CSS

.container {
	margin: 1em 0;
	display: flex;
	width: 100%;
	animation: stretch-shrink 8s infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}
@keyframes stretch-shrink {
	0% {
		width: 100%;
	}
	100% {
		width: 100px;
	}
}
.item {
	height: 100px;
	color: white;
	font-size: 20px;
	text-align: center;
	line-height: 100px;
}
.item1 { background-color: teal; flex: 2 1 auto; } /* 余分なスペースを2倍取る */
.item2 { background-color: purple; flex: 1 1 auto; }
.item3 { background-color: olive; flex: 1 1 auto; }

Sample 2 : flex-shrink Difference

　このサンプルでは、スペースが足りなくなった時に、flex-shrinkによる縮小の挙動の違いを示します。

4
5
6

HTML

<div class="container">
	<div class="item item4">4</div>
	<div class="item item5">5</div>
	<div class="item item6">6</div>
</div>

CSS

.container {
	margin: 1em 0;
	display: flex;
	width: 100%;
	animation: stretch-shrink 8s infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}
@keyframes stretch-shrink {
	0% {
		width: 100%;
	}
	100% {
		width: 100px;
	}
}
.item {
	flex-basis: 100px; /* 各アイテムの基本サイズ */
	height: 100px;
	color: white;
	font-size: 20px;
	text-align: center;
	line-height: 100px;
}
.item4 { background-color: teal; flex: 1 2 auto; } /* 縮小率を高く設定 */
.item5 { background-color: purple; flex: 1 1 auto; }
.item6 { background-color: olive; flex: 1 0 auto; } /* 縮小しない */

Sample 3 : flex-basis Difference

　ここでは、flex-basisを異なる値に設定することで、アイテムの初期サイズの違いを示します。

7
8
9

HTML

<div class="container">
	<div class="item item7">7</div>
	<div class="item item8">8</div>
	<div class="item item9">9</div>
</div>

CSS

.container {
	margin: 1em 0;
	display: flex;
	width: 100%;
	animation: stretch-shrink 8s infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
}
@keyframes stretch-shrink {
	0% {
		width: 100%;
	}
	100% {
		width: 100px;
	}
}
.item {
	height: 100px;
	color: white;
	font-size: 20px;
	text-align: center;
	line-height: 100px;
}
.item7 { background-color: teal; flex: 1 1 200px; } /* 初期サイズが大きい */
.item8 { background-color: purple; flex: 1 1 100px; }
.item9 { background-color: olive; flex: 1 1 50px; } /* 初期サイズが小さい */