FlexboxはCSSの強力なレイアウト機能で、簡単にコンテンツを配置、調整、整列できます。今回は、Flexboxの基本的な使い方を学習しましょう。
Flexboxの基本的な書き方
Flexboxを使うには、まず親要素にdisplay: flex;を指定します。
.container {
display: flex;
}flex-direction … 子要素の並ぶ向き
flex-directionプロパティは、子要素の並び方向を指定します。
.container {
display: flex;
flex-direction: row; /* row | row-reverse | column | column-reverse */
}| 値 | 詳細 |
|---|---|
| row | 子要素が横方向に並ぶ |
| row-reverse | 子要素が横方向に逆順で並ぶ |
| column | 子要素が縦方向に並ぶ |
| column-reverse | 子要素が縦方向に逆順で並ぶ |
flex-wrap … 子要素の折り返し
flex-wrapプロパティは、子要素が折り返すかどうかを指定します。
.container {
display: flex;
flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
}| 値 | 詳細 |
|---|---|
| nowrap | 子要素が折り返さずに1行に並ぶ |
| wrap | 子要素がコンテナ幅を超えると折り返して並ぶ |
| wrap-reverse | 子要素がコンテナ幅を超えると逆順で折り返して並ぶ |
flex-flow … flex-directionとflex-wrapをまとめて指定
flex-flowプロパティは、flex-directionとflex-wrapを一度に指定できます。
.container {
display: flex;
flex-flow: row nowrap; /* flex-directionとflex-wrapの値をスペース区切りで指定 */
}justify-content … 水平方向の揃え
justify-contentプロパティは、子要素を水平方向に揃える方法を指定します。
.container {
display: flex;
justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
}| 値 | 詳細 |
|---|---|
| flex-start | 子要素が左端に揃う |
| flex-end | 子要素が右端に揃う |
| center | 子要素が水平方向に中央に揃う |
| space-between | 子要素間のスペースが均等になるように揃う |
| space-around | 子要素を囲むスペースが均等になるように揃う |
| space-evenly | 子要素間と周囲のスペースが均等になるように揃う |
align-items … 垂直方向の揃え
align-itemsプロパティは、子要素を垂直方向に揃える方法を指定します。
.container {
display: flex;
align-items: stretch; /* stretch | flex-start | flex-end | center | baseline */
}| 値 | 詳細 |
|---|---|
| stretch | 子要素がコンテナの高さに合わせて伸縮する |
| flex-start | 子要素が上端に揃う |
| flex-end | 子要素が下端に揃う |
| center | 子要素が垂直方向に中央に揃う |
| baseline | 子要素がベースラインに揃う |
align-content … 複数行にした時の揃え
align-contentプロパティは、複数行の子要素をどのように揃えるか指定します。
.container {
display: flex;
flex-wrap: wrap;
align-content: stretch; /* stretch | flex-start | flex-end | center | space-between | space-around */
}| 値 | 詳細 |
|---|---|
| stretch | 複数行の子要素がコンテナの高さに合わせて伸縮する |
| flex-start | 複数行の子要素が上端に揃う |
| flex-end | 複数行の子要素が下端に揃う |
| center | 複数行の子要素が垂直方向に中央に揃う |
| space-between | 複数行の子要素間のスペースが均等になるように揃う |
| space-around | 複数行の子要素を囲むスペースが均等になるように揃う |
order … 順序の指定
orderプロパティは、子要素の表示順序を指定します。
.item {
order: 0; /* 整数で指定 */
}flex-grow … 子要素の伸びる比率
flex-growプロパティは、子要素の伸びる比率を指定します。
.item {
flex-grow: 0; /* 数値で指定 */
}flex-shrink … 子要素の縮む比率
flex-shrinkプロパティは、子要素の縮む比率を指定します。
.item {
flex-shrink: 1; /* 数値で指定 */
}flex-basis … 子要素のベースとなる幅の指定
flex-basisプロパティは、子要素のベースとなる幅を指定します。
.item {
flex-basis: auto; /* auto | サイズ単位で指定 (px, %, em, rem など) */
}| 値 | 詳細 |
|---|---|
| auto | 子要素のベースとなる幅を自動的に計算する |
| サイズ単位 | 子要素のベースとなる幅を指定する(px, %, em, rem など) |
align-self … 子要素の垂直方向の揃え
align-selfプロパティは、個別の子要素の垂直方向の揃え方を指定します。これは、親要素のalign-itemsプロパティを上書きします。
.item {
align-self: auto; /* auto | flex-start | flex-end | center | baseline | stretch */
}| 値 | 詳細 |
|---|---|
| auto | 親要素のalign-itemsプロパティを継承する |
| flex-start | 子要素が上端に揃う |
| flex-end | 子要素が下端に揃う |
| center | 子要素が垂直方向に中央に揃う |
| baseline | 子要素がベースラインに揃う |
| stretch | 子要素がコンテナの高さに合わせて伸縮する |
これで、CSS Flexboxを使ったレイアウトの基本的な使い方を学ぶことができました。これらのプロパティを組み合わせることで、様々なレイアウトを効率的に実現できます。練習を重ねて、Flexboxを使いこなしましょう！
