フレックスアイテムの幅の増減を個別指定

フレックスアイテムを配置したとき、フレックスコンテナの主軸方向に余白ができてしまうときや、逆に入りきらずはみ出してしまうときがあります。そんなときに、アイテムの幅を調整することで、コンテナ内にぴったり収めることができます。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>フレックスアイテムの幅の増減を指定する</title>
	<style>
	.container{
		width:500px;
		height:100px;
		border:2px solid black;
		display:flex;
		margin:12px;
	}
	.flexGrow1{flex-grow:1;}
	.flexGrow2{flex-grow:2;}
	.flexShrink1{flex-shrink:1;}
	.flexShrink2{flex-shrink:2;}
	.flexBasis50px{flex-basis:50px;}

	.width50{width:50px;}
	.width100{width:100px;}
	.width150{width:150px;}
	.width200{width:200px;}
	.bgRed{   background-color:red;}
	.bgYellow{background-color:yellow;}
	.bgGold{  background-color:gold;}
	.bgSilver{background-color:silver;}

	</style>
</head>
<body>
	<div class="container">
		<div class="width100 bgYellow flexGrow1 flexShrink1">1</div>
		<div class="width150 bgRed flexBasis50px flexGrow2 flexShrink2">2</div>
		<div class="width100 bgSilver flexBasis50px">3</div>
		<div class="width200 bgGold">4</div>
	</div>
	<div class="container">
		<div class="width50  bgYellow flexGrow1 flexShrink1">1</div>
		<div class="width100 bgRed">2</div>
		<div class="width150 bgSilver flexBasis50px">3</div>
		<div class="width50  bgGold flexBasis50px flexGrow2 flexShrink2">4</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>フレックスアイテムの幅の増減を指定する</title>

<style>

.container{

width:500px;

height:100px;

border:2px solid black;

display:flex;

margin:12px;

}

.flexGrow1{flex-grow:1;}

.flexGrow2{flex-grow:2;}

.flexShrink1{flex-shrink:1;}

.flexShrink2{flex-shrink:2;}

.flexBasis50px{flex-basis:50px;}

.width50{width:50px;}

.width100{width:100px;}

.width150{width:150px;}

.width200{width:200px;}

.bgRed{ background-color:red;}

.bgYellow{background-color:yellow;}

.bgGold{ background-color:gold;}

.bgSilver{background-color:silver;}

</style>

</head>

<body>

</div>

</div>

</body>

</html>

flex-growプロパティ

フレックスアイテムの幅の合計値がフレックスコンテナのサイズより小さいときに余白が発生します。このプロパティは、この余白を各アイテムに分配して幅を広げて調整します。他の割り当てる余白の量を、他のフレックスアイテムに割り当てる量との比率で指定します。
比率を指定するので、負の値は指定できません。初期値は０です。

flex-shrinkプロパティ

フレックスアイテムの合計値がフレックスコンテナのサイズより大きいとき、フレックスアイテムがはみ出します。このプロパティは、アイテムがはみ出さないように幅を縮小して調整します。これも負の値を指定できません。このプロパティは後述のflex-basisプロパティの値により、縮小方法が変わります。初期値は１です。

flex-basisプロパティ

フレックスアイテムが調整される前の基本の幅を指定するプロパティです。値の指定方法はwidthプロパティ(主軸の方向によりheightプロパティ)と同じで、負の値は指定できません。
「flex-basis:0;」と指定すると、調整の割合がそのまま幅に適用されます。
「flex-basis:auto;」と書くと、アイテムの持つ幅が基本の幅となり、この幅に対して余白の割り当てや縮小が行われます。このプロパティの設定値は「auto」、「パーセント値+%」、「実数値+単位」です。初期値は「auto」です。

フレックスアイテムの幅の増減を一括指定

フレックスアイテムの大きさと可変にすると同時に、そのときの増減の割合やサイズを一括して指定するプロパティです。それぞれの値を半角スペースで区切って指定します。
「flex:flex-growの値 flex-shrinkの値 flex-basisの値;」

ちなみに、flexプロパティには以下のように指定することもできます。
flex:0 auto;
flex:initial;
上記の２つは「flex:0 1 auto」と同じです。アイテムのサイズはwidth,heightプロパティを基本とします。コンテナの主軸方向に余白が生じてもアイテムの幅は広げられませんが余白不足(はみ出したとき)が生じた場合は、縮小してきっちり格納されます。

flex:auto
上記は「flex:1 1 auto;」と同じです。アイテムのサイズはwidth,height1プロパティを基本としますが、アイテムは可変となり、コンテナの主軸方向に余白・余白不足が生じたとき増減して調整されます。

flex:none;
「flex:0 0 auto」と同じです。アイテムのサイズは、width,heightプロパティにより決まり、コンテナの主軸方向に余白や余白不足が生じたときは、アイテムの幅は調整されません。

flex:正の実数値
上記は「flex:正の実数値 1 0px;」と同じで、アイテムは可変となって、flex-basisプロパティの値が０に設定されるので、調整の割合がそのまま幅に適用されます。