Flexbox（フレックスボックス）の詳細
1. Flexboxとは？
Flexbox（Flexible Box Layout）は、CSSのレイアウトモデルの一つで、効率的に要素を並べるための手法です。特に、横並びのレイアウトや縦並びのレイアウトを柔軟に調整できるため、レスポンシブデザインにおいて非常に有用です。
2. Flexboxの基本概念
Flexboxには以下の2つの主要なコンポーネントがあります。
- 親要素（コンテナ）:
display: flex;を指定することで、Flexコンテナになります。 - 子要素（アイテム）: Flexコンテナ内に配置される要素。
3. Flexコンテナのプロパティ
Flexboxの親要素には、以下の主要なプロパティがあります。
(1) display
.container {
display: flex; /* または inline-flex */
}
flex：ブロックレベルのフレックスコンテナinline-flex：インラインレベルのフレックスコンテナ
(2) flex-direction
.container {
flex-direction: row; /* row | row-reverse | column | column-reverse */
}
row（デフォルト）：左から右へ並ぶrow-reverse：右から左へ並ぶcolumn：上から下へ並ぶcolumn-reverse：下から上へ並ぶ
(3) justify-content（主軸の揃え方）
.container {
justify-content: center; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
}
flex-start（デフォルト）：左詰めflex-end：右詰めcenter：中央揃えspace-between：両端に均等配置space-around：アイテムの周りに等間隔のスペースspace-evenly：すべてのアイテムの間に均等な間隔
(4) align-items（交差軸の揃え方）
.container {
align-items: center; /* flex-start | flex-end | center | baseline | stretch */
}
flex-start：上揃えflex-end：下揃えcenter：中央揃えbaseline：テキストのベースラインに揃えるstretch（デフォルト）：高さを均等に伸ばす
(5) align-content（複数行時の配置）
.container {
align-content: center; /* flex-start | flex-end | center | space-between | space-around | stretch */
}
複数行になったときの配置を決める。
4. Flexアイテムのプロパティ
個々のFlexアイテムにも制御できるプロパティがあります。
(1) flex-grow（伸縮）
.item {
flex-grow: 1; /* デフォルトは0 */
}
- 値を大きくするほど、余白を多く取る。
(2) flex-shrink（縮小）
.item {
flex-shrink: 0; /* デフォルトは1 */
}
0にすると縮まない。
(3) flex-basis（初期サイズ）
.item {
flex-basis: 100px; /* デフォルトはauto */
}
autoは内容に応じて決まる。- 固定値（px, %, em など）を指定可能。
(4) flex（省略記法）
.item {
flex: 1 1 auto; /* flex-grow, flex-shrink, flex-basis の省略形 */
}
(5) align-self（個別の揃え方）
.item {
align-self: center; /* flex-start | flex-end | center | baseline | stretch */
}
align-itemsを上書きして、個別の要素だけ異なる揃え方ができる。
5. 具体的なレイアウト例
(1) 横並びのナビゲーションバー
<div class="nav">
<a href="#">TEXT1</a>
<a href="#">TEXT2</a>
<a href="#">TEXT3</a>
<a href="#">TEXT4</a>
</div>
.nav {
display: flex;
justify-content: space-between;
background: #333;
padding: 10px;
}
.nav a {
color: white;
text-decoration: none;
padding: 10px;
}
(2) 縦並びのカードレイアウト
<div class="card-container">
<div class="card">card1</div>
<div class="card">card2</div>
<div class="card">card3</div>
<div class="card">card4</div>
</div>
.card-container {
display: flex;
flex-direction: column;
align-items: center;
}
.card {
width: 300px;
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
}
6. まとめ
Flexboxは、要素を柔軟に配置できる非常に便利なCSSのレイアウトモデルです。横並び・縦並びの調整、中央揃え、レスポンシブデザインの実装に適しています。基本プロパティを理解し、適切に活用することで、柔軟なデザインを実現できます。
以上がFlexboxの詳細な解説です。ぜひ実際にコードを書いて試してみてください！