▲TOPへ戻る

flex-growプロパティを理解する 子要素の比率を指定し、親要素の余白を埋める

flex-grow

flex-growとは?

flex-grow プロパティは、flexアイテムの比率を決めます。 flexコンテナ(親要素)内に余白があるとき、 余白部分をflexアイテムに指定した比率の分だけ追加します。

つまり、親要素に余白がない時に、flex-growを指定しても何も変化はありません

flex-grow

flex-growの指定方法

<div class="wrapper">
  <div class="item1">Item1</div>
  <div class="item2">Item2</div>
  <div class="item3">Item3</div>
</div>

<style>
  .wrapper {
    display: flex;
    width: 100%;
  }
  .item1,
  .item2,
  .item3 {
    display: flex;
    width: 20%;
    height: 100px;
  }
</style>
Item1
Item2
Item3
余白

  .item1 {
    flex-grow: ;
  }
  .item2 {
    flex-grow: ;
  }
  .item3 {
    flex-grow: ;
  }

flex-growの初期値は0です。

子要素すべてにflex-grow: 1;を指定すると、 同じ比率でwidthが追加され、余白を埋めてくれます。

それぞれの子要素に違う値を指定すると、その比率で各要素のwidthが伸縮します。

flexboxの主軸と交差軸に注意!

上記の記述は、flex-direction(主軸)がrow(横並び)の場合です。

flex-directioncolumnの場合は、縦方向の余白を埋めます。

flex-grow

参考

css
フレックスボックス超入門 主軸と交差軸の方向をマスターする

まとめ

  1. flex-grow プロパティは、flexアイテムの比率を決める。
  2. 親要素に余白がない時に、flex-growを指定しても何も変化はない。
  3. flexboxの主軸と交差軸に注意が必要。

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ