Perl Web開発者のHTML・CSS入門

複数行のフレックスレイアウトをマスターする

複数行のフレックスレイアウトをマスターしましょう。複数行のフレックスレイアウトをマスターすると、たとえば、商品画像と商品タイトルを複数行に並べることができます。

フレックスレイアウト入門の記事を読んでいることが前提です。

複数行のフレックスレイアウト

フレックスレイアウトは、複数行にすることができます。フレックスレイアウトを複数行にするには、まず最初に「display:flex」を指定した要素に「flex-wrap:wrap」を指定します。

<div style="background:#fee;display:flex;flex-wrap:wrap">
  <div style="background:red;">
    焼肉<br>
    No. 1
  </div>
  <div style="background:green;">
    焼鳥
  </div>
  <div style="background:blue;">
    サラダ
  </div>
  <div style="background:yellow;">
    ラーメン
  </div>
</div>

CSSで「flex-wrap:wrap」を指定しても、これだけでは、複数行にはなりません。この後に、幅の指定をしていく必要があります。

均等幅で並べる

「width:50%」を子要素に指定して、均等幅で並べてみましょう。

<div style="background:#fee;display:flex;flex-wrap:wrap">
  <div style="background:red;width:50%;">
    焼肉<br>
    No. 1
  </div>
  <div style="background:green;width:50%;">
    焼鳥
  </div>
  <div style="background:blue;width:50%;">
    サラダ
  </div>
  <div style="background:yellow;width:50%;">
    ラーメン
  </div>
</div>

おお、二行に並びましたね。この子要素の中に、商品画像と商品タイトルを入れたりできます。

スマートフォン対応したヘッダーのレイアウト例

スマートフォン対応したヘッダーのレイアウトのサンプルを書いてみます。

フレックスレイアウトを使って、CSSを切り替えるだけで、PCとスマートフォンのヘッダを切り替えられる構成です。

ヘッダーPC表示

フレックスレイアウトでの、ヘッダーPC表示です。サイトタイトル固定幅、メニュー一覧が均等幅です。

<div style="background:#fee;display:flex;flex-wrap:wrap;">
  <div style="background:red;width:180px;">
    Perlクラブ
  </div>
  <div style="background:green;display:none;">
    メボ
  </div>
  <ul style="width:calc(100% - 180px);display:flex;">
    <li style="background:blue;width:33.3%;">
      会社情報
    </li>
    <li style="background:yellow;width:33.3%;">
      アクセス
    </li>
    <li style="background:pink;width:33.4%;">
      問い合わせ
    </li>
  </ul>
</div>

ヘッダースマートフォン表示

フレックスレイアウトでの、ヘッダースマートフォン表示です。サイトタイトル可変、メニューボタン(メボ)固定幅、メニューが二段目以降です。メニューボタンで、切り替え表示可能なレイアウトです。

<div style="background:#fee;display:flex;flex-wrap:wrap">
  <div style="background:red;width:calc(100% - 40px);">
    Perlクラブ
  </div>
  <div style="background:green;width:40px;height:40px;">
    メボ
  </div>
  <ul style="width:100%;display:flex;flex-wrap:wrap;">
    <li style="background:blue;width:100%;">
      会社情報
    </li>
    <li style="background:yellow;width:100%;">
      アクセス
    </li>
    <li style="background:pink;width:100%;">
      問い合わせ
    </li>
  </ul>
</div>