CSS

on Note

display:flex; フレックスボックスを生成する

要素やコンテンツを内包するボックスを、フレキシブル(「柔軟性がある様」を意味する)なボックスとすることでボックスの配置の指定がしやすくなります。

フレキシブルなボックスとして機能させる為に、親要素にあたるボックス側に、display: flex;を指定します。この指定によって、そのボックスの子要素にあたるボックスの配置を柔軟に行えるようにします。こういったフレキシブルなボックスをフレックスボックスと呼んでいます。

フレックスボックスは、複数のボックスを横や縦に並べ替えたり、並び順を指定したりと、ボックスの配置を柔軟にするレイアウトモデルです。

フレックスボックスでは次のようなことができます。

  • ボックスを横一列、または縦一列に並べる。
  • ボックスを複数行、または複数列に並べる。
  • ボックスの並び順を入れ替える。
  • 横方向に並んだボックスの高さを揃える。または縦方向に並んだボックスの幅を揃える。
  • 並んでいるボックスのサイズを伸縮させて、親要素にぴったり収まるようにする。

ボックスを並べ替えたい時に、それらの親要素にあたるボックスにdisplay: flex;を指定して、上記のようなことを実現します。

フレックスボックスの基本構造

フレックスボックスでは、実際に並べ替えたいアイテムと、その直上の親要素に注目します。

例えばグローバルナビゲーションなど、横に並べ替えたいアイテムがあったとします。この場合は、並べ替えたいアイテムの親要素にdisplay: flex;を指定することで、各アイテムが横に並びます。親要素にdisplay: flex;を指定することで、その子要素に当たる各ボックスは、配置指定の対象となるアイテムとして扱われるわけです。

この時、親要素をflexコンテナ、子要素をflexアイテムという言い方をします。flexコンテナにdisplay: flex;を指定し、flexアイテムの配置をレイアウトする、ということです。

flexコンテナとflexアイテムの関係
flexコンテナとflexアイテムのイメージ

注意すべきは、flexアイテムとして扱われるのはdisplay: flex;を指定した要素の、直下の要素(直接の子要素)だけという点です。displayプロパティは値の継承がないからです。

display: flex;を指定した例

下の見本では、リストにした各メニュー(ホーム、会社概要、商品、問い合わせ)を、横並びのメニューにします。

<ul>
    <li>ホーム</li>
    <li>会社概要</li>
    <li>商品</li>
    <li>問い合わせ</li>
</ul>
ul {
    display: flex;
    background-color: #555;
    color: #fff;
    list-style-type: none;
}
li {
    padding: 0 10px;
}

上のコードの結果が下です。

  • ホーム
  • 会社概要
  • 商品
  • 問い合わせ

li要素はデフォルトでは縦に並ぶのですが、親要素であるul要素にdisplay: flex;を指定して横並びになるようにしています。

親要素にあたるflexコンテナでdisplay: flex;を指定し、同時に、flexコンテナやflexアイテムで、並び順や寸法などに関するプロパティも指定して柔軟なレイアウトを実現します。

display: flex; はフレックスボックスを生成するもの

display: flex;は、フレックスボックスを生成する為のプロパティ・値であって、ボックスを横並びにする為のものとは限らない、という点は押さえておくべきです。

ただ、デフォルトではアイテムが縦に並んでしまうボックスに、display: flex;を指定すると、それだけで結果的にアイテムは横に並びます。

アイテムが並ぶ方向を、水平方向にするのか垂直方向にするのかは、同時に指定するプロパティで設定することができます。

まとめ

親要素にあたるボックスにdisplay: flex;を指定することで、その子要素がflexアイテムとして扱われます。

display: flex;に加え、flexコンテナやflexアイテムに、同時に他のプロパティを指定することで柔軟にレイアウトを調整できます。