English 中文 العربية 日本語 Português

CSS: CSS Flexboxアイテム

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

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

(1) 早見表

プロパティ 値 用途
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をオーバーライド

2. flex-grow

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

▶ サンプル

HTML 
<style>
.container {
  display: flex;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item-1 { flex-grow: 1; background: #3498db; padding: 10px; color: white; }
.item-2 { flex-grow: 2; background: #e74c3c; padding: 10px; color: white; }
.item-3 { flex-grow: 1; background: #2ecc71; padding: 10px; color: white; }
</style>
<div class="container">
  <div class="item-1">grow: 1</div>
  <div class="item-2">grow: 2（2倍の幅）</div>
  <div class="item-3">grow: 1</div>
</div>
▶ 試してみよう

3. flex: 1の省略形

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

▶ サンプル

HTML 
<style>
.container {
  display: flex;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  flex: 1;
  background: #9b59b6;
  padding: 10px;
  color: white;
  text-align: center;
}
</style>
<div class="container">
  <div class="item">等分</div>
  <div class="item">等分</div>
  <div class="item">等分</div>
</div>
▶ 試してみよう

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

4. order

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

▶ サンプル

HTML 
<style>
.container {
  display: flex;
  gap: 10px;
  background: #f5f5f5;
  padding: 10px;
}
.item {
  background: #f39c12;
  padding: 10px;
  color: white;
}
.item:nth-child(2) { order: -1; } /* 前面に移動 */
</style>
<div class="container">
  <div class="item">DOMで1番目</div>
  <div class="item">DOMで2番目（視覚的に1番目）</div>
  <div class="item">DOMで3番目</div>
</div>
▶ 試してみよう

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

5. align-self

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

▶ サンプル

HTML 
<style>
.container {
  display: flex;
  align-items: center;
  height: 200px;
  background: #f5f5f5;
  gap: 10px;
  padding: 10px;
}
.item {
  background: #e74c3c;
  padding: 10px;
  color: white;
}
.item:nth-child(2) { align-self: flex-end; }
.item:nth-child(3) { align-self: flex-start; }
</style>
<div class="container">
  <div class="item">中央（デフォルト）</div>
  <div class="item">下（align-self）</div>
  <div class="item">上（align-self）</div>
</div>
▶ 試してみよう

❓ よくある質問

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で個別に上部に配置できます。

📖 まとめ

📝 練習問題

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

Web-Tutorial 技術チーム

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

100%