ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】flexアイテムの大きさと伸縮を一括指定する方法を解説

【CSS】flexアイテムの大きさと伸縮を一括指定する方法を解説

HTML/CSS

2022/05/24

2023/05/08

CSSの記述で、「 flex: 1; 」のような指定を目にしたことはありませんか？この記述は、flexアイテムの伸縮に関するプロパティをショートハンドで指定したものです。

flexアイテムの大きさや伸縮は、flex-grow、flex-shrink、flex-basisを使うことで指定可能です。しかしこれらのプロパティを別々に記述するのは手間がかかります。

そんなとき、flexプロパティを使用すれば、CSSの記述を減らして簡単にコーディングを行えます。

この記事ではflexプロパティの使い方を解説します。

この記事で身につく内容

flexとは
flexの使い方

flexを使いこなすためには、flexboxを理解しておくことが大切です。flexboxはCSSのレイアウトモードであり、効率的なレイアウト作成に役立ちます。

flexboxプロパティの種類は多く、すべてを学ぶのは一筋縄ではいきませんが、少しずつ学習していきましょう。こちらの記事でflexboxについて詳しく解説しています。

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

flexとは
flexの使い方
まとめ

flexとは

flex は、flexアイテムの大きさや伸縮をショートハンドで指定できるプロパティです。

指定する数値の数や単位の有無によって、どのプロパティの値をとるかが変わります。

値が1つのとき	単位なし	flex-grow
値が1つのとき	単位あり	flex-basis
値が2つのとき	単位なし	flex-grow、 flex-shrink
値が2つのとき	単位なし（2つ目の値）	flex-grow、 flex-basis
値が3つのとき	3つ目の値に単位が必要	flex-grow、flex-shrink、flex-basis

それぞれの使い分けは、次項で詳しく解説します。

flexの使い方

flexは、flexアイテムに有効なプロパティです。そのため、親要素には display: flex; の指定が必要です。

以下が flex の基本形です。

 <div class="flexbox">
   <div class="flex-item item01">①</div>
   <div class="flex-item item02">②</div>
   <div class="flex-item item03">③</div>
 </div>

.flexbox {
  display: flex;
}

.flex-item01 {
  flex: 数値;
}

flexの数値が1つのとき

flex に指定する値が1つだけのときは、単位の有無によって以下の値をとります。

単位なし - flex-grow の値
単位あり - flex-basis の値

記述例と出力結果を確認してみましょう。

単位なしの場合

flex で指定した数値に単位をつけない場合、flex の値は flex-grow の値をとります。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
</div>

.flexbox {
  display: flex;
  border: 1px solid #000;
  text-align: center;
}

.flex-item {
  color: #fff;
}

.item01 {
  background-color: red;
  flex: 1;
}

.item02 {
  background-color: blue;
  flex: 2;
}

.item03 {
  background-color: green;
  flex: 3;
}

See the Pen flex1 by ZeroPlus (@zeroplus-programming) on CodePen.

flex の値は flex-grow の値をとり、flexアイテムがそれぞれ 1 : 2 : 3の比率で表示されました。

flex-grow の使い方についてはこちらの記事で詳しく解説しているので、参考にしてください。

【CSS】flex-growの使い方！flexアイテムの大きさを倍率で指定する方法を解説

単位ありの場合

flex で指定した数値に単位をつけた場合、flex の値は flex-basis の値をとります。

<div class="flexbox">
<div class="flex-item item01">①</div>
<div class="flex-item item02">②</div>
<div class="flex-item item03">③</div>
</div>

.flexbox {
  display: flex;
  border: 1px solid #000;
  text-align: center;
}

.flex-item {
  color: #fff;
  width: 100%;
}

.item01 {
  background-color: red;
  flex: 300px;
}

.item02 {
  background-color: blue;
  flex: 500px;
}

.item03 {
  background-color: green;
  flex: 600px;
}

See the Pen flex2 by ZeroPlus (@zeroplus-programming) on CodePen.

flex の値は flex-basis の値をとり、指定した大きさで表示されました。今回の例ではpxで指定しましたが、%やem、remなども指定できます。

flex-basis の使い方については、こちらの記事で解説しています。ぜひ参考にしてください。

【CSS】flex-basisの使い方を解説！widthやheightとの違いは？

flexの数値が2つのとき

flex に指定する値が2つのときは、単位の有無によって以下の値をとります。

単位なし - flex-grow、flex-shrink の値
単位あり - flex-shrink、flex-basis の値

なお、単位をつける場合は2つ目の値にのみ有効です。

記述例と出力結果を確認してみましょう。

単位なしの場合

どちらの値にも単位を指定しない場合、flex の値は flex-grow、flex-shrink の値をとります。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
</div>

.flexbox {
  display: flex;
  border: 1px solid #000;
  text-align: center;
}

.flex-item{
  color: #fff;
}

.item01{
  background-color: red;
  flex: 1 1;
}

.item02{
  background-color: blue;
  flex: 2 2;
}

.item03{
  background-color: green;
  flex: 3 3;
}

See the Pen flex3 by ZeroPlus (@zeroplus-programming) on CodePen.

今回の例ではflexコンテナに余白があるため、flex は flex-grow の値をとっています。

flex-shrink の値を反映させたい場合は、以下のような条件を満たす必要があります。

flexコンテナの幅を超えるflexアイテムの幅を指定
flex-basis を指定

flex-shrink はflexコンテナとflexアイテムの幅によって出力結果が変化します。flex-shirnk はこちらの記事で詳しく解説しているので、併せてお読みください。

【CSS】flex-shrinkでflexアイテムを縮小させる方法を解説

単位ありの場合

2つ目の値に単位を指定した場合、flexの値は flex-grow、flex-basis の値をとります。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
</div>

.flexbox {
  display: flex;
  border: 1px solid #000;
  text-align: center;
  width: 100%;
}

.flex-item{
  color: #fff;
  width: 100%;
}

.item01{
  background-color: red;
  flex: 1 10%;
}

.item02{
  background-color: blue;
  flex: 2 10%;
}

.item03{
  background-color: green;
  flex: 3 10%;
}

See the Pen flex4 by ZeroPlus (@zeroplus-programming) on CodePen.

flex-grow と flex-basis を同時に指定している記述のため、flexアイテムは15%を基準に 1 : 2 : 3 の比率で表示されています。

flexの数値が3つのとき

flexの値が3つのとき、flex は flex-grow、flex-shrink、flex-basis のショートハンド指定となります。3つ目の数値には単位が必要です。

記述例と出力結果を確認してみましょう。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
</div>

.flexbox {
  display: flex;
  border: 1px solid #000;
  text-align: center;
  width: 100%;
}

.flex-item {
  color: #fff;
  width: 100%;
}

.item01 {
  background-color: red;
  flex: 1 1 15%;
}

.item02 {
  background-color: blue;
  flex: 2 2 15%;
}

.item03 {
  background-color: green;
  flex: 3 3 15%;
}

See the Pen flex5 by ZeroPlus (@zeroplus-programming) on CodePen.