Flexible Boxについて（flexアイテム編）

2019/07/29

flexアイテムに指定できるプロパティを紹介します。

順番を入れ替えたり、子要素の伸縮率でを指定したり。flexアイテムに指定できるプロパティをまとめて紹介します。

ベースのHTML

今回はul、liを使って紹介します。他のタグでももちろんOKです。

		<ul class="sample">
			<li class="item01">1</li>
			<li class="item02">2</li>
			<li class="item03">3</li>
		</ul>

		.sample{
			display: flex;
		}

また、今回はflexアイテムに対して指定するプロパティについて紹介します。

flexアイテムの順番を変えられます。マイナスの数値も可能。初期値は０です。

		.item01 { order: -1;}
		.item02 { order: 3;}
		.item03 { order: 0;}
		.item04 { order: 2;}
		.item05 { order: 1;}

flexコンテナーにスペースがある場合、flexアイテムの伸びる比率を指定できます。

		.item01 { flex-grow: 1;}
		.item02 { flex-grow: 2;}
		.item03 { flex-grow: 0;}

flex-growとは真逆のプロパティです。flexコンテナーにスペースがない場合、flexアイテムの縮む比率を指定できます。初期値は０です。

		.item01 { flex-shrink: 1;}
		.item02 { flex-shrink: 2;}
		.item03 { flex-shrink: 0;}

flexアイテムの幅を、widthと同じように決めることができます。初期値はautoです。

		.item01 { flex-basis: 1;}
		.item02 { flex-basis: 2;}
		.item03 { flex-basis: 0;}

「flex-grow」、「flex-shrink」、「flex-basis」の順でまとめて指定できるショートハンドです。

		/*記述例*/
		.item01 { flex: 1 0 40%;}

align-itemと同じように垂直方向の指定ができますが、flexアイテムに対してになります。また、flexコンテナーの指定（align-item）よりも優先されます。

		.item01 { align-self: center;}
		.item02 { align-self: flex-end;;}
		.item03 { height: 150px;}

いかがでしたか？
今回はflexアイテム編でしたが、よければこちらも合わせて読んでみてくださいね。
「Flexible Boxについて（flexコンテナー編）」それでは、みなさん善きコーディングライフを♪