CSSのflex:1とは？

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%;

参照

developer.mozilla.org