Flexboxを適用して横並びにした要素のレイアウトを調整したい時
親要素に指定できるプロパティと子要素に指定できるプロパティがあります！
親要素に指定できるプロパティは以下↓↓
- flex-direction ・・・ 要素の並ぶ方向
- flex-wrap ・・・ 要素の折り返し
- justify-content ・・・ 要素の水平方向の位置
- align-items ・・・ 要素の垂直方向の位置
- align-content ・・・ 複数行の時の垂直方向の位置
子要素に指定できるプロパティは別記事にあります
flex-direction ＜要素の並ぶ方向＞
子要素をどの方向に並べていくかを指定できます
| row（デフォルト） | 子要素を左から右に配置 |
| row-reverse | 子要素を右から左に配置 |
| column | 子要素を上から下に配置 |
| column-reverse | 子要素を下から上に配置 |
CSS例
.oya{
display: flex;
flex-direction: row;
}
flex-wrap ＜要素の折り返し＞
子要素を折り返して表示するか、一行で表示するかを指定できます
| nowrap（デフォルト） | 折り返しせずに一行で配置 |
| wrap | 折り返して上から下へ配置 |
| wrap-reverse | 折り返して下から上へ配置 |
CSS例
.oya{
display: flex;
flex-wrap: wrap;
}
justify-content ＜要素の水平方向の位置＞
子要素を水平方向のどの位置に配置するかを指定できます
| flex-start（デフォルト） | 先頭から配置（左揃え） |
| flex-end | 末尾から配置（右揃え） |
| center | 中央揃え |
| space-between | 両端に余白を入れず均等配置 |
| space-around | 両端の子要素も含めて均等配置 |
CSS例
.oya{
display: flex;
justify-content: center;
}
align-items ＜要素の垂直方向の位置＞
子要素を垂直方向のどの位置に配置するかを指定できます
| stretch（デフォルト） | 親要素の高さいっぱいに配置 |
| flex-start | 始点から配置（上揃え） |
| flex-end | 終点から配置（下揃え） |
| center | 中央揃え |
| baseline | ベースラインに合わせて配置 |
CSS例
.oya{
display: flex;
align-items: center;
}
align-content ＜複数行の時の垂直方向の位置＞
子要素が複数行の際、垂直方向のどの位置に配置するかを指定できます
※子要素が一行の時は無効になります
| stretch（デフォルト） | 親要素の高さに合わせ均等配置 |
| flex-start | 先頭から配置（左揃え） |
| flex-end | 末尾から配置（右揃え） |
| center | 中央揃え |
| space-between | 上下に余白を入れず均等配置 |
| space-around | 上下の子要素も含めて均等配置 |
CSS例
.oya{
display: flex;
align-content: flex-start;
}
希望通りの表示ができるように、色々なプロパティを組み合わせて記述してみてください！
子要素に指定するプロパティもあります。
それでもまた色々表示を変えられるので、見てみてください♪
