flexboxで3×3レイアウト(マルチレイアウト)を作る

シェアする

IT・Web業界での転職への転職を考えていれば⇨IT・Web業界での転職なら【レバテックキャリア】

今回は3×3レイアウトをflexboxで作っていきたいと思います。

HTMLコード

<div class="board">
  <ul>  
    <li>
      <div class="icon">
        <img src="https://dl.dropbox.com/s/11le4z3tt0x8q7p/icon.jpg?dl=0" alt="アイコン">
      </div>
      <div class="label">ラベル1</div>
    </li>
    <li>
      <div class="icon">
        <img src="https://dl.dropbox.com/s/11le4z3tt0x8q7p/icon.jpg?dl=0" alt="アイコン">
      </div>
      <div class="label">ラベル2</div>
    </li>
    <li>
      <div class="icon">
        <img src="https://dl.dropbox.com/s/11le4z3tt0x8q7p/icon.jpg?dl=0" alt="アイコン">
      </div>
      <div class="label">ラベル3</div>
    </li>
  </ul>
</div>

flexboxの親要素となるのはboardクラスの中のul要素です。

ul要素の中の子要素(li)の数が横に並ぶ要素数になります。

今回は3×3レイアウトを作成するので、li要素を3つ用意します。

縦に並ぶ要素はul(親要素)の数になるので、<ul>~</ul>をコピーして2回貼り付けましょう。

CSSコード

.board {
  width: 350px;
  margin: 0 auto;
}

.board ul {
  display: flex;
  justify-content: space-between;
  align-content: space-between;
}

上のコードはflexboxの部分です。

ul要素を囲むboardクラスは今回横幅を350pxと指定しています。

(指定がない場合は全画面に対して配置されることになります)

まず、親要素のulにdisplay: flex;と指定します。

今回子要素は1列に並べるので折り返しの設定はしていませんが、折り返したい場合はflex-wrap: wrap(wrap-reverse);のように記述すると複数行に並べられます。

justify-contentalign-contentはそれぞれ、水平方向、垂直方向の並べ方について指定します。

どちらもspace-betweenと指定することで、最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置されます。

全部の子要素を均等に配置したい場合はspace-aroundとすればよいです。

サンプル

See the Pen QBPNQX by Nssh (@shtg11) on CodePen.0

上がサンプルとなります。

モバイル用サイトのメニュー画面等色々な場面で使えると思うのでぜひ活用してみてください。