はじめに
「この要素を、あっちにちょっとだけずらしたいんだけど…」「なんで横並びにならないんだ！？」
Webサイトのレイアウトで、そんな風に頭を悩ませたことはありませんか？ 実は、そんなレイアウトの悩みを解決してくれるCSSプロパティ、それがFlexboxなんです！
初めてWebサイトの模写に挑戦したとき、複写元のサイトでも
「display: flex設定しすぎだろ！」
となるぐらい使われていました。
この記事では、Webサイトを構築する上で必須のFlexboxの内容やよく使うプロパティを解説していきます。
※勉強の備忘をかねているため、間違っている箇所や修正した方がいい箇所等ございましたら、教えていただけると幸いです。
そもそも「Flexbox」ってなに？
簡単に言うと、要素を横並びにし、要素間の間隔や配置を自由に設定することができるCSSプロパティです。
親要素にdisplay: flexを設定することで、親要素がFlexコンテナ、親要素内の各要素がFlexアイテムとなり、Flexコンテナに特定のCSSプロパティを設定することで、Flexアイテムの配置や間隔などを指定することができる。
こんな感じ。
Flexboxで重要な軸について
Flexboxを理解する上で、主軸と交差軸という2つの軸の概念がとても大切になります。
例えるなら、電車の路線のようなものです。主軸は、電車が走るメインの線路。要素はこの線路に沿って一列に並びます。そして、交差軸は、その線路に対して垂直に伸びる方向。駅のホームの位置(１番ホーム・２番ホームのような)をイメージすると分かりやすいかもしれません。
各軸に対してCSSプロパティを設定することで、要素を縦横無尽にコントロールできるのです。
デフォルトでは横方向が主軸、縦方向が交差軸となっているため、デフォルト設定では、Flexアイテムは横方向に並びます。
Flexコンテナに設定する便利プロパティ
以降のメゾットやプロパティの説明に使うHTML・CSSのサンプルは以下のような内容になっています。(関係のないHTMLやプロパティは省略しています)
<body>
<div class="parent-container">
<div class="child-container1">Flexアイテム1</div>
<div class="child-container2">Flexアイテム2</div>
<div class="child-container3">Flexアイテム3</div>
</div>
</body>
.parent-container {
background-color: gray;
display: flex;
}
.child-container1 {
background-color: red;
}
.child-container2 {
background-color: yellow;
}
.child-container3 {
background-color: aqua;
}
初期イメージ
justify-content（主軸の配置変更）
MDNドキュメント参照
CSS の justify-content プロパティは、フレックスコンテナーの主軸、グリッドおよび段組みコンテナーのインライン軸に沿って、中身のアイテムの間や周囲に間隔を配置する方法を定義します。
Flexコンテナに設定するFlexアイテムの主軸方向への配置や余白を指定するプロパティです。
主軸はデフォルトでは横方向となるため、横方向に並ぶ子要素の配置を指定するプロパティです。
justify-contentにも様々なプロパティがありますが、よく使いそうなものは👇の通りです。
justify-content: center;
Flexアイテムを主軸の中央に配置するプロパティです。
justify-content: space-evenly;
Flexアイテム間の左右の余白を均一にして配置するプロパティです。
justify-contentデモサイト
他にも様々なプロパティがあります！
MDNのサイトで、デモ形式で各プロパティの挙動を確認できるため、挙動の確認におすすめです。
align-items（交差軸の配置変更）
MDNドキュメント参照
CSS の align-items プロパティは、すべての直接の子要素に集合として align-self の値を設定します。フレックスボックスでは交差軸方向のアイテムの配置を制御します。グリッドレイアウトでは、グリッド領域におけるアイテムのブロック軸方向の配置を制御します。
Flexコンテナに設定するFlexアイテムの交差軸方向への配置を指定するプロパティです。
主軸はデフォルトでは縦方向となるため、縦方向に並ぶ子要素の配置や余白を指定するプロパティです。
align-itemsにも様々なプロパティがありますが、よく使いそうなものは👇の通りです。
align-items: stretch;
FlexアイテムをFlexアイテムを交差軸方向に、Flexコンテナの高さ（または幅）いっぱいに引き伸ばして表示するプロパティです。
ただし、Flexアイテムにwidth(flex-direction: rowの場合)またはheigth(flex-direction: columnの場合)を明示的に指定している場合は、stretchは適用されません。
align-items: center;
Flexアイテムを交差軸の中央に配置するプロパティです。
align-itemsデモサイト
他にも様々なプロパティがあります！
MDNのサイトで、デモ形式で各プロパティの挙動を確認できるため、挙動の確認におすすめです。
終わりに
今回ご紹介した内容は、Flexboxの基本的なプロパティの一部です。flex-directionを使用して、横並びではなく、縦方向に子要素を並べるなど様々なことができます！
今回ご紹介した内容だけでも、要素を綺麗に横並びにすることができるようになると思います！
Flexboxの学習をもっと深めたい場合は、ゲーム形式で楽しく学べる以下のサイトもおすすめです。
flexboxfroggy
最後までお読みいただき、ありがとうございました！
参考
・MDN公式ドキュメント
・flexboxfroggy