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とします：
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem3">3</div>
</div>
.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;
}
:
関連項目
-
フレックスコンテナの主軸方向を指定するプロパティ
flex-direction
-
主軸に沿ったアイテムの配置を指定するプロパティ
justify-content
-
交差軸に沿ったアイテムの配置を指定するプロパティ
align-items
-
フレックスアイテムの折り返しを指定するプロパティ
flex-wrap
-
flex-directionとflex-wrapの一括指定プロパティ
flex-flow
-
フレックスアイテムの表示順序を指定するプロパティ
order
-
個々のフレックスアイテムの交差軸方向の配置を指定するプロパティ
align-self
-
フレックスアイテムの初期サイズを指定するプロパティ
flex-basis
-
フレックスアイテムの伸長比率を指定するプロパティ
flex-grow
-
フレックスアイテムの縮小比率を指定するプロパティ
flex-shrink
