ブロックレベル要素は、通常は縦に積み重なるため、
横並びにするために工夫が必要になる。
横並びの方法
ブロックレベル要素を横並びにするためには、
displayプロパティにflexという値を指定する。
■displayプロパティ
displayプロパティは、要素の種類(ブロックレベル要素、インライン要素)を変更することができるプロパティ。値には、変更したい要素の種類を設定する。
| 値との組み合わせ | 説明 |
|---|---|
| display: block; | 指定された要素は、ブロックレベル要素として表示される |
| display: inline; | 指定された要素は、インライン要素として表示される |
| display: inline-block; | 指定された要素は、並びはインライン要素だが、中身はブロックレベル要素として表示される |
| display: flex; | 指定された要素の子要素が横並びになる |
| display: none; | 指定された要素は、非表示になる |
もし、横並びにしたい場合は、「display: flex;」を使用する。
Flexboxを用いた配置の調整について
■Flexbox
親要素に、display: flex;を付与することで、子要素が横並びになる。そして、その子要素らの並び順や要素同士の幅を決めることができる。この調整方法の総称を、Flexboxという。
■justify-contentプロパティ
justify-content: 〇〇;といった形で、display: flex;と併せて使用する。主軸方向(初期値は水平方向)の配置を決めることができる。
| 値との組み合わせ | 説明 |
|---|---|
| justify-content:flex-start; | 左寄せ |
| justify-content:flex-end | 右寄せ |
| justify-content:center | 中央寄せ |
| justify-content:space-between | 両端が左右に寄り等間隔 |
| justify-content:space-around | 両端が左右に寄り等間隔、両端の余白と要素間の余白が1:2 |
■主軸方向と交差軸方向
主軸方向とは、display: flex;を付与して横並びにした要素が並ぶ方向。(初期値は水平方向)
交差軸方向とは、主軸に直角に交わる方向。(初期値は垂直方向)
交差軸方向(初期値は垂直方向)の配置の調節には、align-itemsプロパティを使用する。
■align-itemsプロパティ
align-items: 〇〇;といった形で、display: flex;と併せて使用する。交差軸方向(初期値は垂直方向)の配置の詳細を決めることができる。
| 値との組み合わせ | 説明 |
|---|---|
| align-items:flex-start; | 上揃え |
| align-items:flex-end; | 下揃え |
| align-items:center; | 中央揃え |
要素の方向や並び順を変更する方法
■flex-directionプロパティ
要素の主軸方向や並び順を変更するにはflex-directionプロパティを使用する。
| 値との組み合わせ | 説明 |
|---|---|
| flex-direction:row; | 左から右に並べる(初期値) |
| flex-direction:row-reverse | 右から左に並べる(並び順を変更) |
| flex-direction:column | 上から下に並べる(軸の方向を変更) |
| flex-direction:column-reverse | 下から上に並べる(軸の方向と並び順を変更) |
まとめ
●displayプロパティは、要素の種類(ブロックレベル要素、インライン要素)
を変更することができるプロパティ。
●要素を横並びにする方法の1つは、横並びにしたい要素の親要素に
display:flex;を指定すること。
●FlexBoxとは、display:flex;が指定された要素の子要素らの並び順や要素同士の幅を詳細に決めることができる調整方法の総称。
●justify-contentプロパティとは、主軸方向(初期値は水平方向)の配置の詳細を決めることができるプロパティ。
●align-itemsプロパティとは、交差軸方向(初期値は垂直方向)の配置の詳細を決めることができるプロパティ。