【初心者向け】 Flexboxで横並びレイアウトを組んでみよう

【初心者向け】 Flexboxで横並びレイアウトを組んでみよう

Flexboxを使って

横並びレイアウトを組んでみましょう。

Flexboxとは、

レイアウト設計が簡単にできる

最近では定番のCSSレイアウトモデルです。

◇この記事のテーマ

・Flexboxで簡単なレイアウトを組めるようになる。

・横並びのメニューを作ります。

・初心者の方でもイメージしやすいよう

手順を追いながら解説していきます。

◇横並びメニューを作ってみよう

メニュー画像

よくグローバルナビとかなんとか言われますが、

今回はこのメニューをFlexboxを使って組んでみましょう。

全体のコードは、こんな感じで組んでみました。

(※ヘッダーを想定してコードを書いています。

スマホ時はハンバーガーメニューにする想定なので今回は割愛してます。)

html

<header>
  <div class="header-wrap">
    <h1 class="logo">
      <a href="#">Breakfast</a>
    </h1>

    <nav class="global-nav">
      <ul class="menu-wrap">
        <li class="menu-item">
          <a href="#">メニュー</a>
        </li>
        <li class="menu-item">
          <a href="#">メニュー</a>
        </li>
        <li class="menu-item">
          <a href="#">メニュー</a>
        </li>
        <li class="menu-item">
          <a href="#">メニュー</a>
        </li>
        <li class="menu-item">
          <a href="#">メニュー</a>
        </li>
      </ul>
    </nav>
  </div>
</header> 

css

.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: calc(100% - 120px);
  margin: 0 auto;
  padding: 30px 0;
}

.header-wrap .logo {
  width: 40%;
  color: #707070;
  font-size: 3rem;
}

.header-wrap .global-nav {
  width: 55%;
}

.header-wrap .menu-wrap {
  display: flex;
  justify-content: space-between;
}

.header-wrap .menu-item {
  width: 18%;
  text-align: center;
}

これが正解というわけではないので

自分の思うままに組んでみてください。

全然思うように出来なくて

悩んでハゲてきた頃にようやく覚えます。

コーディングは

保守性、可読性を意識してコーディングした方がいい

ですが、この内容はまた別の機会に解説します。

では、このコードを細かく分けてみていきたいと思います。

メニュー画像

1の赤枠で囲っている部分

<div class="header-wrap">

2の赤枠で囲っている部分

<h1 class="logo">
    <a href="#">Breakfast</a>
</h1>

3の赤枠で囲っている部分

<nav class="global-nav">
    <ul class="menu-wrap">

4の赤枠で囲っている部分

<li class="menu-item">
    <a href="#">メニュー</a>
</li>

ざっくりこういうブロック分けです。

FlexBoxを使い横並びにするには、

横並びにしたい要素の上の要素

display: flex;

を指定します。

全体を囲っている「1の赤枠で囲っている部分

<div class="header-wrap">

「メニュー」のテキストを囲っている

3の赤枠で囲っている部分

<ul class="menu-wrap">

に指定します。

flexboxメニュー

上記のように、指定した要素の子要素が横並びになります。

基本的にはこれだけです。

display: flex;

を指定するだけで横並びが実現できる便利なプロパティです。

また、FlexBoxにはjustify-content など

要素の配置を簡単に指定できるプロパティがあります。

https://developer.mozilla.org/ja/docs/Web/CSS/justify-content

(※justify-contentの配置に関するスタイルシートのリンクです。)

中央配置、等間隔のスペースをあけて配置など複数の指定方法があります。

他にもFlexBoxで活用できるプロパティは

たくさんありますので必要に応じて使ってみてください。

FlexBoxは、

かなり広範囲のデザインパターンに活躍する

「万能なプロパティ」なので

どんどん活用していきましょう!