CSS3を勉強したい

CSS3Cascading Style Sheets

フレックスボックスとはどんなものか

Webページにおいて、様々な要素やボックスを配置しているボックスを、フレキシブル(「柔軟性がある様」を意味する)なボックスとすることで要素の配置が柔軟になり、レイアウトをより理想に近いものとします。

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

こういったフレキシブルなボックスをフレックスボックスと呼んでいます。

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

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

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

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

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

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

例えばグローバルナビゲーションなど、横に並べ替えたいアイテムがあったとします。この場合は、並べ替えたいアイテムの親要素にdisplay: flex;を指定することで、各アイテムが横に並びます。

親要素にdisplay: flex;を指定することで、その子要素に当たる各ボックスは、配置指定の対象となるアイテムとして扱われるわけです。

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

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

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

並び順などに関するプロパティ・値も指定することで、flexアイテムを様々な形で配置します。

display: flex;を指定した例

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

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

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

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

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

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

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

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

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