flexプロパティ

プロパティflexは、flex-basis、 flex-shrink、 およびflex-growの一括指定プロパティです。

適用対象：個々のフレックスアイテム。

値の順序は重要です。2番目と3番目のパラメータ（flex-shrink、flex-basis）は必須ではありません。

値

各々の個別プロパティを参照してください。

初期値：0 1 auto。

例

3つのアイテムがあるとします。各アイテムの幅は200pxで、合計は600pxです。これは親コンテナの幅300pxよりも大きいです。最初のアイテムの幅を200px、2番目のアイテムを300px、3番目のアイテムを100pxとします。すべてのアイテムでflex-basisの値を1とし、flex-shrinkの値をアイテムの順番に応じて1、2、3とします：

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem3">3</div>
</div>

css.parent {
  display: flex;
  width: 350px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 200px;
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  flex: 200px 1 1;
}
.elem2 {
  flex: 300px 1 2;
}
.elem3 {
  flex: 100px 1 3;
}

Результат:

関連項目