CSS: CSS Flexboxアイテム

最終更新：2026-10-13

Flexboxアイテムのプロパティは、Flexコンテナ内の個々の子要素を細かく制御できます。

1. Flexアイテムのプロパティ

プロパティ	値	用途
`flex-grow`	`0`、`1`、`2`、...	兄弟要素に対してアイテムがどれだけ成長するか
`flex-shrink`	`0`、`1`、`2`、...	兄弟要素に対してアイテムがどれだけ縮むか
`flex-basis`	`auto`、`100px`、`50%`	成長/縮小前の初期サイズ
`flex`	`1`、`0 0 200px`、`1 1 auto`	grow、shrink、basisの省略形
`order`	`0`、`1`、`-1`	視覚的な順序（DOMに影響しない）
`align-self`	`auto`、`flex-start`、`flex-end`、`center`	親のalign-itemsをオーバーライド

他のアイテムに対してFlexアイテムがどれだけ成長するかを制御：

flex: 1は最も一般的な省略形：

flex: 1はflex-grow: 1; flex-shrink: 1; flex-basis: 0%を意味します——「成長して利用可能なスペースを等分で埋める」。

DOMの順序に影響せずに視覚的な順序を変更：

注意： orderは視覚的な順序のみを変更し、DOMの順序は変わりません。スクリーンリーダーはDOMの順序に従います。

個々のアイテムに対して親のalign-itemsをオーバーライド：

Q flex: 1とはどういう意味ですか？

A flex: 1はflex-grow: 1; flex-shrink: 1; flex-basis: 0%の省略形で、「成長して残りのスペースを埋める」ことを意味します。複数のアイテムがすべてflex: 1を持つ場合、コンテナの幅を等分します。

Q orderはDOM構造に影響しますか？

A いいえ。orderは視覚的な配置のみを変更し、DOMの順序は変わりません。スクリーンリーダーはDOMの順序に従うため、視覚のみのソートにorderを使用しないでください——アクセシビリティに影響します。

Q align-selfとalign-items、どちらが優先されますか？

A align-selfの方が優先されます。個々のアイテムに作用し、親のalign-itemsをオーバーライドします。例えば、親が中央揃えのためにalign-items: centerを設定しても、子はalign-self: flex-startで個別に上部に配置できます。

Flexboxアイテムのプロパティは、各子要素の順序とサイズを細かく制御できます
flex: 1は最も一般的な等分の省略形で、orderはHTMLを変更せずに視覚的な順序を調整し、align-selfは個々の要素を「際立たせる」ことができます
覚えておいてください：コンテナプロパティは全体を制御し、アイテムプロパティは個々を制御します

5つのアイテムを含むFlexコンテナを作成してください。orderを使用して、3番目のアイテムを最初に表示し、1番目のアイテムを最後に表示してください。
flex-growを使用して「3等分カラム」を実装し、その後、中央のカラムを両側の2倍の幅にしてください。
「固定サイドバー + アダプティブコンテンツ」レイアウトを作成してください：サイドバーはflex: 0 0 250px、コンテンツはflex: 1を使用。
コンテナ内で、align-selfを使用して最初の2つのアイテムを上部に、3番目を下部に配置してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。