フレックスボックスとは
フレックスボックスとは、兄弟要素で構成されるボックスの並べ方や配置を操作できるCSSの機能になります。いろいろな用途がありますが、最もよく使うのがボックスを横一列に並べることです。
例えばいちもんじのサイトのメニューも横に並べていますが、このフレックスボックスを使うと、こんな風に横一列にメニューを並べることが可能です。↓
フレックスボックスの使い方
CSSを追加する箇所
フレックスボックスを使うには、横一列に並べたい兄弟要素に共通する、直接の親要素のスタイルにCSSを追加します。わかりにくいと思うので実際のコードで見てみるとこんな感じです。
<nav class="menu">
<ul>←これが直接の親要素（ここにCSSを追加します！）
<li>Rule</li>←兄弟
<li>Blog</li>←兄弟
<li>Manual</li>←兄弟
</ul>
</nav>ちなみに、親とか兄弟とかわからんよ！って人はこちらに記事をまとめているので参考までにどうぞ。
追加する内容
フレックスボックスにするために追加するCSSの内容はこちらです↓
display: flex;
たったのこれだけで兄弟要素は横一列になってチャールストン踊ります。例えば上の例でいくならば、具体的にはこんな感じの記載になります。↓
.menu ul{ display: flex;}自分で決めたメニュー（menu）クラスの中にある<ul>タグに対してdisplay: flex;を設定しています。
気を付けるポイント
フレックスボックスを使う際のポイントとしてはこんな感じ。
- 横並びにしたい要素が兄弟要素であること
- その兄弟要素共通の親要素があり、その親要素にdisplay:flex;を追加すること
以上のことを守ってさえいれば、リストやメニューに限らず、どんな兄弟要素だろうが横並びにすることは可能です。
フレックスボックスで横に並べた要素を中央に揃える
フレックスボックスで横に並べた要素を中央に揃えるには、さっき書いたdisplay: flex;の下にjustify-contentプロパティを追記します。
.menu ul{
display: flex;
justify-content:center;
}このjustify-contentは、フレックスボックスで横に並んだ要素の配置を設定するプロパティです。centerが中央揃えのことですね。フレックスボックスの親要素、つまりdisplayの時と同じ対象に対してCSSの設定をすることになります。これはもう、ペアで覚えておくと良いかもしれませんね。
ちなみに、右に揃えたいときは「right」、左に揃えたいときは「left」になります。野球と同じだ！
要素と要素の間隔を調整する
横に並べた<nav>タグの要素と要素の間隔が気になるぞという人もいるでしょう。一文字のサイトで言うとこの部分になります。
もちろん、この間隔も微調整することができます。そんな時に追加するのがgapプロパティになります。gapプロパティで指定した分だけこのメニューは離れたりくっついたりできるというわけです。指定の方法はこんな感じ。↓
.menu ul{
display: flex;
justify-content:center;
gap:10px;
}この場合、１０px分の間隔を取ってメニューが並んでくれます。便利ですね。