コピペでできるflexboxを用いたレイアウト

対応するブラウザも普及し、flexboxは非常に扱いやすくなってきました。
今回はコーディングする際に、よくあるレイアウトをflexboxを利用してコーディングする際のサンプルをご紹介します。

コピペでできるコーディング例

1.グローバルナビゲーションなどに利用する横１列のレイアウト

これは一番基本的な利用方法です。左右の余白をなくし、均等に配置するにはjustify-content: space-between;と設定します。
各要素の余白が均等になるように配置されます。

html

<div class="flexwrap flex01">
<div>テキスト</div>
<div>テキストテキスト</div>
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>
</div>

css

.flex01 {
  justify-content: space-between;
}

2.ヘッダーのように左にロゴを配置し他を右寄せに配置するレイアウト

これは1のマイナーチェンジですが、ヘッダーなどで左にロゴ右に電話番号や問い合わせボタンといったレイアウトでよくあるパターンです。
一つ目の要素にmargin-right:auto;を設定することで、残りの要素を右に配置します。

html

<div class="flexwrap flex02">
<div>ロゴ</div>
<div>テキスト</div>
<div>テキスト</div>
</div>

css

.flex02 {
  justify-content: space-between;
}
.flex02 > div:first-child {
  margin-right: auto;
}

3.一定の幅の横幅で要素を横にならべ、右端で折り返すレイアウト

これも1のマイナーチェンジですが、ワードプレスなどの更新コンテンツの一覧表示などでよく用いられるレイアウトです。
親要素にflex-wrap: wrap;を設定しつつ、子要素にwidthの設定が必要となります。

html

<div class="flexwrap flex03">
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>
</div>

CSS

.flex03 {
  flex-wrap: wrap;
}
.flex03 > div {
  width: 30%;
  margin: 0 0 15px 5%;
}
.flex03 > div:nth-child(3n+1) {
  margin-left: 0;
}

4.要素を右端で折り返しつつ中央揃えで配置するレイアウト

これは3のマイナーチェンジです。これはほとんどの場合５つの要素を２列で表示する時にしか使用しません。

html

<div class="flexwrap flex04">
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>
<div>テキスト</div>
</div>

css

.flex04 {
  justify-content: center;
  flex-wrap: wrap;
}
.flex04 > div {
  width: 30%;
  margin: 0 0 15px 5%;
}
.flex04 > div:nth-child(3n+1) {
  margin-left: 0;
}

5.右にナビゲーションを配置した2カラムレイアウト

2カラムレイアウトでよくあるものです。各要素に横幅を設定することで、任意の横幅のボックスをレイアウトできます。

html

<div class="flexwrap flex05">
<div>コンテンツ</div>
<div>
<ul>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
</ul>
</div>
</div>

css

.flex05 {
  justify-content: space-between;
}
.flex05 > div:first-child {
  width: 70%;
}
.flex05 > div:nth-child(2) {
  width: 25%;
}

6.右にナビゲーションを配置した2カラムレイアウト

これは5と一見同じに見えますが5と6はhtmlは同一でcssのみが異なります。htmlのソースコードの順として、コンテンツの情報をナビゲーションの情報よりも早く記述をしたいので、CSSで表示順を制御しています。

html

<div class="flexwrap flex06">
<div>コンテンツ</div>
<div>
<ul>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
</ul>
</div>
</div>

css

  .flex06 {
    justify-content: space-between;
  }
  .flex06 > div:first-child {
    width: 70%;
    order: 2;
  }
  .flex06 > div:nth-child(2) {
    width: 25%;
    order: 1;
  }

7.左右にナビゲーションを配置した3カラムレイアウト

これも6と同じくhtmlではコンテンツを上部に記述し、ナビゲーションをそのあとに記述し、cssで表示順を制御しています。

html

<div class="flexwrap flex07">
<div>コンテンツ</div>
<div>
<ul>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
</ul>
</div>
<div>
<ul>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
<li>ナビゲーション</li>
</ul>
</div>
</div>

css

  .flex07 {
    justify-content: space-between;
  }
  .flex07 > div:first-child {
    width: 50%;
    order: 2;
  }
  .flex07 > div:nth-child(2) {
    width: 20%;
    order: 3;
  }
  .flex07 > div:nth-child(3) {
    width: 20%;
    order: 1;
  }

8.画像とテキストを組み合わせたボタン風のレイアウト

Webサイトではよくあるあしらいですね。ボタンなどによく用いられる画像とテキストを左右に配置したレイアウトです。
子要素にdisplay: flex;を設定することで、flexboxを使用したレイアウトの中でさらにflexboxを用いたレイアウトを設定することが可能です。

html

<div class="flexwrap flex08">
<div class="item">
<div>
</div>
<div>
<p class="tit">見出し見出し見出し</p>
<p>テキストテキストテキストテキストテキストテキスト</p>					
</div>
</div>
<div class="item">
<div>
</div>
<div>
<p class="tit">見出し見出し見出し</p>
<p>テキストテキストテキストテキストテキストテキスト</p>					
</div>
</div>
<div class="item">
<div>
</div>
<div>
<p class="tit">見出し見出し見出し</p>
<p>テキストテキストテキストテキストテキストテキスト</p>					
</div>
</div>
<div class="item">
<div>
</div>
<div>
<p class="tit">見出し見出し見出し</p>
<p>テキストテキストテキストテキストテキストテキスト</p>					
</div>
</div>
</div>

css

 .flex08 {
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .flex08 .item {
    display: flex;
    width: 49%;
  }
  .flex08 .item:nth-child(n+3) {
    margin-top: 15px;
  }
  .flex08 .item > div:first-child {
    width: 100px;
    height: 100px;
    background: #ddd;
  }
  .flex08 .item > div:nth-child(2) {
    width: calc(100% - 115px);
    margin-left: 15px;
    text-align: left;
  }

9.天地中央に揃えたボタン風のレイアウト

8をベースに要素を天地中央に揃えたものです。親要素にalign-items: center;と設定することで、天地中央に子要素を揃えることができます。

html

<div class="flexwrap flex09">
<div class="item">
<div>
</div>
<div>
<p class="tit">見出し見出し見出し</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>	
</div>
</div>
<div class="item">
<div>
</div>
<div>
<p class="tit">見出し見出し見出し</p>
<p>テキストテキストテキストテキストテキストテキスト</p>					
</div>
</div>
<div class="item">
<div>
</div>
<div>
<p class="tit">見出し見出し見出し</p>
<p>テキストテキストテキストテキストテキストテキスト</p>					
</div>
</div>
<div class="item">
<div>
</div>
<div>
<p class="tit">見出し見出し見出し</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>					
</div>
</div>
</div>

css

.flex09 {
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex09 .item {
  display: flex;
  width: 49%;
  align-items: center;
}
.flex09 .item:nth-child(n+3) {
  margin-top: 15px;
}
.flex09 .item > div:first-child {
  width: 100px;
  height: 100px;
  background: #ddd;
}
.flex09 .item > div:nth-child(2) {
  width: calc(100% - 115px);
  margin-left: 15px;
  text-align: left;
}

なお今回紹介したレイアウトはスマートフォンでの閲覧を100%考慮したスタイルではありません。スマートフォンでも快適に閲覧するためには、別途レスポンシブコーディングを行い、それぞれのデバイスに最適な設定をする必要があります。
いずれも実際のコーディングでよく使用するcssの設定です。使いこなして、効率よくコーディングを行ってください。