Flexbox まとめ
概要
今回は、サイトの見た目を構築するHTML&CSSの技術についてです。
Flexboxとは
Flexboxは、Flexible Box Layout Moduleの略で、ボックス状の要素を並べるための技術です。
Flexboxを使うと、これらのメリットがあります。
・要素内の縦横の配置が簡単にできる（コードがシンプル）
・要素間の余白を自動で調節してくれる
・文字の記述量が要素によって異なっても幅を均等にしてくれる
以前は複雑なコードを記述して要素のレイアウトを行っていたようですが、Flexboxを使うと、2〜3行の記述で綺麗にレイアウトできます。
使い方
まずは、横並びに配置する方法です。HTML&CSSでは、画面左上に重力がかかっている積木のような状態なので、初期設定ではどんどん積み重なってしまいます。
Flexboxを使えば、簡単に要素を横並びにできます。
displayプロパティ
displayプロパティは、要素の種類(ブロックレベル要素、インライン要素)を変更することがdきるプロパティです。
・display: block; 指定された要素がブロック要素として表示されます。
・display: inline; 指定された要素がインライン要素として表示されます。
・display: inline-block; 指定された要素が、インラインブロック要素として表示されます。
・display: flex; 指定された要素の子要素が横並びになります。
・display: none; 指定された要素が非表示になります。
Flexboxを使って要素を横並びにするには、display: flex;を指定します。
そして、その子要素の並び順や要素同士の幅を決める調節方法をFlexboxと呼びます。
justify-contentプロパティ
display: flex;を記述した親要素にjustify-content: ◯◯; という形で記述します。
justify-contentプロパティを指定すると、主軸方向（初期値は水平方向）の配置を決めることができます。
・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プロパティ
display: flex;を付与した親要素に、align-items: ◯◯;という形で記述します。
交差軸方向（初期値は垂直方向）の配置を決められます。
・align-items: flex-start; 上揃え
・align-items: flex-end; 下揃え
・align-items: center; 中央揃え
