【CSS】flexアイテムが余白を埋める、またはサイズを縮めるなどの伸縮比率を指定するflexプロパティ＜1＞

Flexプロパティとは親要素のflexコンテナ内の子要素であるFlexアイテムが、Flexコンテナ内に余白が生じる場合、flex-growプロパティを使ってどのぐらいの比率で余白を埋めるか、逆に、FlexコンテナからFlexアイテムがはみ出るくらいの場合、どのFlexアイテムをどのぐらい縮めるかなどを指定します。

flexプロパティは、lex-grow、flex-shrink、flex-basisという３つの伸縮率関連プロパティ全般を一括指定できるショートハンドです。

セレクタ {flex: 値値値； }

</style>
 .flex_item {
　　flex: 3 3 150px;/*[flex-grow] [flex-shrink] [flex-basis]の順*/
　　}
</style>

flex-grow

余白がある場合、flexアイテムが他のflexアイテムと比較してどのくらいの大きさ(相対値)にするか、伸長率（flex grow factor）を指定します。

FlexコンテナがFlexアイテムを格納しても余りがある場合、指定されたプロパティに従い、自動的に伸びて余白を埋めます。

数値が大きいほど伸長率が大きくなります。通常1,2，3，... など整数で値を指定します。負の値は指定できません。省略した場合は 1 になります。

セレクタ {flex-grow: 値； }

</style>
 .flex_item {
　　flex-grow: 3；
　　}
</style>

flex-shrink

flexコンテナ内にflexアイテムが入りきらない場合、flexアイテムが他のアイテムと比較してどのくらい縮まるか、相対値として圧縮率(flex shrink factor)を指定します。

数値が大きいほど幅が狭くなります。通常1,2，3，... など整数で値を指定します。省略した場合は 1 になります。負の値は指定できません。

セレクタ {flex-shrink: 値； }

</style>
 .flex_item {
　　flex-shrink: 2;
　　}
</style>

flex-basis

flexアイテムの主軸方向サイズ(最初のメインとなるサイズ)の初期値を指定します。

幅(width)と高さ(height)のプロパティの形式で値に入力します。

セレクタ {flex-basis: 値； }

</style>
 .flex_item {
　　flex-basis: 50px;
　　}
</style>

flex-growサンプル

以下のサンプルではflexコンテナの中に４つのflexアイテムを配置させて、flex-growの値を1～4をそれぞれ指定し該当flexアイテムの大きさがどのように変化するかを検証してみます。

まず以下のように、flexコンテナにwidthとflex-flow：横配置(row)と折り返し無し(nowrap)を簡単に指定しました。

[CSS]　flexコンテナ

</style>
 .flex_container {
　　width:600px;
　　display:flex;
　　flex-flow:row nowrap;
　　}
</style>

まず以下のように、flexアイテムにwidthとflex-flow：横配置(row)と折り返し無し(nowrap)を簡単に指定しました。

[CSS]　flexアイテム

</style>
 div{
　　height:30px;
　　flex-basis:100px;
　　}

 .flex_grow0{
　　flex-grow:0;
　　background-color:#25b404;/*A*/
　　}
 .flex_grow1 { 
　　flex-grow:1;
　　background-color:#ffcc00;/*B*/
　　}
 .flex_grow2 { 
　　flex-grow: 2;
　　background-color:#085ffe;/*C*/
　　}
 .flex_grow3 { 
　　flex-grow: 3;
　　background-color:#eb02fa;/*D*/
　　}
</style>

基本ベースとなるサイズ(flex-basis)を100pxに指定して、flex-growの値を「0」にした場合、以下のように４つのflexアイテムの大きさは均等に100pxとなり、flexコンテナの大きさ(600px)から右側に200pxの余白が出来ちゃいます。

[HTML]　flex-grow:0;

<div class="flex_container">
   <div class="flex_grow0">A</div>
   <div class="flex_grow0">B</div>
   <div class="flex_grow0">C</div>
   <div class="flex_grow0">D</div>
</div>

基本ベースとなるサイズ(flex-basis)を100pxに指定し、４つのflexアイテム全てにflex-growの値を「1」にした場合、以下のように４つのflexアイテムの大きさは均等に150px(flexコンテナサイズ600pxを４に割る)となり、４つのflexアイテムが右側の余白を均等に埋めています。

[HTML]　flex-grow:1;

<div class="flex_container">
   <div class="flex_grow1">A</div>
   <div class="flex_grow1">B</div>
   <div class="flex_grow1">C</div>
   <div class="flex_grow1">D</div>
</div>

基本ベースとなるサイズ(flex-basis)を100pxに指定し、flex-growの値を「1」から「4」までそれぞれ４つのflexアイテムに指定した場合、大きさもその比率に合わせて配列されflexコンテナ内の余白を埋めていきます。

[HTML]　flex-grow:1;～4;

<div class="flex_container">
   <div class="flex_grow0">A</div>
   <div class="flex_grow1">B</div>
   <div class="flex_grow2">C</div>
   <div class="flex_grow3">D</div>
</div>