CSSでdisplay: flexを使用するときに、flex: 1;の記載を見かけることがあるかもしれません
この記事では、何気なく書いてしまう「flex: 1;」について解説しようと思います。
flexとは？
まずこの場合の flex は、display: flexを指定した要素内にある子要素に指定するプロパティです。
display: flexはフレックスボックスと呼ばれていて、ある要素に定義するだけで、その直下の要素が並列になるスタイルです。
シンプルな導入であれば、CSSでdisplay:flexというスタイルを指定するだけです。左から並べたり右から並べたり、均等に並べたりのカスタマイズも可能です。
flex:1とは？
flex: 1とは、flexプロパティを一括指定で、flex:1 1 0を省略して書いたものです。
それぞれのプロパティを細かく見てみると、flex-grow: 1とflex-shrink: 1とflex-basis: 0の組み合わせです。
３種類のプロパティをそれぞれを確認していきます。
flex-grow
flex-growは、親要素のflexコンテナの余っているスペースを、子要素のflexアイテムに分配して、flexアイテムを伸ばすプロパティです。 flex-growの値は整数値のみで、flexアイテムが伸びる比率を指定します。
下記HTMLとCSSを例にして少し説明します。
<div class="flex-container">
<div class="flex-item item1">アイテム①</div>
<div class="flex-item item2">アイテム②</div>
</div>
.flex-container {
display: flex;
background-color: blue;
}
.flex-item {
background-color: red;
margin: 10px;
padding: 50px 0;
}
表示すると下記のように横並びになります
アイテム①とアイテム②の右側は空きスペースになります。
そこで下記のCSSを追加するとどうなるでしょうか？
.item1 {
flex-grow: 1;
}
.item2 {
flex-grow: 2;
}
表示させるとアイテム①とアイテム②で横幅が埋まります。
これは、それぞれのflexアイテムに「flex-grow: 1;」と「flex-grow: 2;」が指定されているため、空きスペースが3分割されます。 そして、3分割された空きスペースが、flex-growで指定された割合に応じて、各flexアイテムに分配されます。
今回の場合にはitem1には空きスペースの1/3、item2には2/3が割り当てられます。
flex-shrink
flex-shrinkは、親要素のflexコンテナからはみ出した分を元に、子要素のflexアイテムを縮めるプロパティです。
flex-shrinkも値は整数値のみで、flexアイテムを縮める比率を指定します。
さっそく、コードを見ていきます。 flex-shrinkを0に指定すると、縮まずにオリジナルサイズで表示されます。
.flex-container {
display: flex;
background-color: blue;
}
.flex-item {
background-color: red;
margin: 10px;
padding: 50px 0;
width: 1000px;
}
.item1 {
flex-shrink: 0;
}
.item2 {
flex-shrink: 0;
}
そこで下記のようにitem1だけflex-shrink: 1を設定すると、両方とも枠内に収まるようにitem1が縮みます。
.item1 {
flex-shrink: 1;
}
.item2 {
flex-shrink: 0;
}
flex-basis
flex-basisは、flexアイテムの基準となる幅を設定するプロパティです。
flex-basisプロパティでは、widthまたはheightプロパティと同じ値を使用でき、px、em などの単位付きの数値や、親要素のflexコンテナに対するパーセンテージを指定します。 デフォルトは auto で、コンテンツの内容に応じて自動サイズ設定されます。
flex-basisは、flex-grow、flex-shrinkがついてなければ、widthやheightプロパティと同じです。 flexアイテムが横並びのときに widthプロパティと同じ動作をし、縦並びの時にheightプロパティと同じ動作になります。
例えば、下記のようなCSSがあるとします。
.flex-container {
display: flex;
background-color:blue;
}
.flex-item {
background-color:red;
margin: 10px;
padding: 50px 0;
width: 300px;
}
.item1 {
flex-basis: 150px;
}
.item2 {
flex-basis: 100px;
}
それぞれのflexアイテムは、flex-basisで指定した横幅になっています。 flex-itemクラスで、width を指定していますが、widthよりflex-basisで指定したものが優先されます。
ここまででプロパティについて説明しました。 そして、今回はflex:1について説明しましたが、それ以外のパターンも設定できるので、下記にパターンの一例を記載します。
/* 単位がない数値を 1 つ指定: flex-grow この場合 flex-basis は 0 と等しくなる*/ flex: 2; /* 幅または高さを 1 つ指定: flex-basis */ flex: 10em; flex: 30%; flex: min-content; /* 値を 2 つ指定: flex-grow | flex-basis */ flex: 1 30px; /* 値を 2 つ指定: flex-grow | flex-shrink */ flex: 2 2; /* 値を 3 つ指定: flex-grow | flex-shrink | flex-basis */ flex: 2 2 10%;
