CSS フレックス アイテム
子要素(アイテム)
フレックスコンテナーの直接の子要素は、自動的にフレキシブル(フレックス)アイテムになります。
1
2
3
4
上記の要素は、灰色のフレックスコンテナー内の4つの青色のフレックスアイテムを表しています。
フレックスアイテムのプロパティは次のとおりです。
orderプロパティ
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 プロパティ
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プロパティ
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プロパティは、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 番目の flex アイテムをコンテナーの中央に配置します。
<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>
CSSフレックスボックスアイテムのプロパティ
次の表に、CSSフレックスボックスアイテムのすべてのプロパティを示します。
|
プロパティ |
説明 |
|---|---|
| align-self | フレックスアイテムの配置を指定します(フレックスコンテナーのalign-itemsプロパティをオーバーライドします)。 |
| flex | flex-grow、flex-shrink、およびflex-basisの簡略プロパティ プロパティ |
| flex-basis | フレックスアイテムの初期の長さを指定します |
| flex-grow | 同じコンテナー内の残りのフレックスアイテムと比較して、フレックスアイテムがどれだけ大きくなるかを指定します。 |
| flex-shrink | 同じコンテナー内の残りのフレックスアイテムと比較して、フレックスアイテムがどの程度縮小するかを指定します。 |
| order | 同じコンテナー内のフレックス項目の順序を指定します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。