CSSフレックスアイテム
子要素（アイテム）
フレックスコンテナの直接の子要素は、自動的にフレキシブル（フレックス）アイテムになります。
1
2
3
4
上記の要素は、灰色のフレックスコンテナ内の4つの青いフレックスアイテムを表しています。
例
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
フレックスアイテムのプロパティは次のとおりです。
注文プロパティ
このorderプロパティは、フレックスアイテムの順序を指定します。
1
2
3
4
コードの最初のフレックスアイテムは、レイアウトの最初のアイテムとして表示される必要はありません。
注文値は数値である必要があり、デフォルト値は0です。
例
orderプロパティは、フレックスアイテムの順序を変更できます。
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
flex-growプロパティ
このflex-growプロパティは、フレックスアイテムが残りのフレックスアイテムと比較してどれだけ大きくなるかを指定します。
1
2
3
値は数値である必要があり、デフォルト値は0です。
例
3番目のフレックスアイテムを他のフレックスアイテムより8倍速く成長させます。
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
フレックスシュリンクプロパティ
このflex-shrinkプロパティは、フレックスアイテムが残りのフレックスアイテムと比較してどれだけ縮小するかを指定します。
1
2
3
4
5
6
7
8
9
10
値は数値である必要があり、デフォルト値は1です。
例
3番目のフレックスアイテムを他のフレックスアイテムほど収縮させないでください。
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
フレックスベースのプロパティ
このflex-basisプロパティは、フレックスアイテムの初期の長さを指定します。
1
2
3
4
例
3番目のフレックスアイテムの初期の長さを200ピクセルに設定します。
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
フレックスプロパティ
flexプロパティは、、、およびプロパティの省略形
flex-growのflex-shrinkプロパティですflex-basis。
例
3番目のフレックスアイテムを拡大不可（0）、縮小不可（0）、初期長200ピクセルにします。
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
align-selfプロパティ
プロパティは、フレキシブルコンテナ内の選択されたアイテムのalign-self配置を指定します。
このalign-self プロパティは、コンテナのalign-itemsプロパティによって設定されたデフォルトの配置を上書きします。
1
2
3
4
align-selfこれらの例では、プロパティをより適切に示すために、高さ200ピクセルのコンテナを使用しています。
例
コンテナの中央に3番目のフレックスアイテムを配置します。
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self:
center">3</div>
<div>4</div>
</div>
例
2番目のフレックスアイテムをコンテナの上部に配置し、3番目のフレックスアイテムをコンテナの下部に配置します。
<div class="flex-container">
<div>1</div>
<div style="align-self:
flex-start">2</div>
<div style="align-self:
flex-end">3</div>
<div>4</div>
</div>
CSSFlexboxアイテムのプロパティ
次の表に、CSS FlexboxItemsのすべてのプロパティを示します。
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |