Flexboxを用いてレスポンシブなサイトを構築する

今回はFlexboxを使用してレスポンシブなサイトを構築する方法を解説していきます。

Flexboxは文字通りフレキシブルなレイアウトを構築できるボックスで、今後webデザインを行う上で必要不可欠になってくると考えられます。

そんなFlexboxはレスポンシブwebデザインにも最適で、画面サイズに応じて最適なレイアウトを構築することができます。ぜひ今回の記事を参考に、ご自身のサイトにFlexboxを導入してみてください。

1. Flexboxの使い方
2. Flexboxを使用して少ないコードでレスポンシブなサイトを作成する
3. まとめ

Flexboxの使い方

まずはFlexboxの基本的な使い方を解説していきます。
例１をみてください。
例１　基本的なFlexbox
コードは以下のようになります。
HTML

<h3>flexboxを適用していないとき</h3>
<div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>
<h3>flexboxを適用したとき（横並びになる）</h3>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</div>

CSS

.container {
  display: flex;
}
.item{
  padding:20px;
}

親要素に「display: flex;」を適用することでFlexboxを使用することができます。
「display: flex;」を適用させただけだとコンテンツが横並びになっただけですが、親要素、子要素それぞれに適宜プロパティを適用していくことでさまざまな形にレイアウトを変形させることができます。

多くのプロパティがあるので、それらを表にまとめてみました。
まずは親要素に適用するプロパティです。

justify-content:flex-end;
flex-direction: row;	子要素を左から右に配置する。初期値。
flex-direction:row-reverse;	子要素を右から左に配置する。rowの逆バージョン。
flex-direction:column;	子要素を上から下に配置。
flex-direction:column-reverse;	子要素を下から上に配置。columnの逆バージョン。
flex-wrap:nowrap;	折り返しは行わないため、画面サイズが縮小しても、1列に並んだままとなる。
flex-wrap:wrap;	子要素を折り返す。
justify-content:flex-start;	水平方向の配置をコントロールできる。flex-startは、左揃えで要素が配置される。 flex-endは右揃えで、centerは中央揃えで配置される。
justify-content:center;
align-items:stretch;	垂直方向の配置をコントロールできる。stretchは一番高い子要素の高さに合わせて配置される。flex-startは上揃えで、flex-endは下揃えで、centerは中央揃えで配置される。
align-items:flex-start;
align-items:flex-end;
align-items:center;
justify-content: space-around;	均等な余白で配置する。

次に子要素に適用するプロパティです。

flex-shrink:（数値を入力）;
order:（数値を入力）;	初期値は０。要素の順番を変更できる。
flex-grow:（数値を入力）;	親要素に余ったスペースがあった場合、flex-growは他の子要素に比べどのくらい伸びるかを決めるプロパティ。 flex-shrinkはその逆で、他の子要素に比べどのくらい縮むかを決めるプロパティ。
flex-basis:（数値を入力）;	widthと同じく幅を指定することができる。

これらを組み合わせることによってさまざまなレイアウトを組み上げることができます。他にもプロパティは存在しますが、数が多いため今回は主要なプロパティを列挙しました。

それでは、これらプロパティを活用したレスポンシブなサイトの作成方法を紹介していきます。

Flexboxを使用して少ないコードでレスポンシブなサイトを作成する

どの画面サイズでもナビゲーションバーを均等配置する

Flexboxを用いることで、ナビゲーションバーを均等配置することができます。
以下の例２のページをみてください。
例２　Flexboxによるコンテンツの均等配置

以下例２のコードです。
HTML

<div class="container">
<div class="item">ホーム</div>
<div class="item">導入事例</div>
<div class="item">サポート</div>
<div class="item">そのほか</div>
</div>

CSS

.container {
  display: flex;
	flex-flow: row;
	justify-content: space-around;
	margin: 0;
	padding: 6px;
	list-style-type: none;
        background-color: #222222;
}
.item {
	border-radius: 4px;
	color: white;
	text-decoration: none;
}

marginやpaddingを使用して余白を設定して均等配置させる場合、デバイス画面に応じて調整しなければならず、手間がかかります。しかしFlexboxの「justify-content: space-around;
」を用いることで、どんな画面サイズでも正確に均等配置させることができます。

画面サイズに応じてコンテンツの配置、順番を切り替える

pcの時と、スマホの時とでコンテンツの順番を切り替えたいという場面は多々あると思います。このような場合も、Flexboxをつかうことで解決することができます。
例３をみてください
例３　コンテンツの順番、配置を切り替える
以下例３のコードです。
HTML

<div class="container">
<div class="item">サブコンテンツA</div>
<div class="item">サブコンテンツB</div>
<div class="item">メインコンテンツ</div>
<div class="item">サブコンテンツC</div>
<div class="item">サブコンテンツD</div>
</div>

CSS

.container {
  display : flex;
  justify-content:center;
   background: #d4ddf8;
  width     : 100%;
  margin    : 10px;
  padding   : 5px;
        flex-direction:row;
        flex-wrap:wrap;
}
.item {
	border-radius: 4px;
	color: white;
        background-color:blue;
        width:100px;
        height: 100px;
        font-size:20px;
        text-align:center;
        margin:30px;
}
@media screen and (max-width: 600px) {
.container {
  flex-direction: column;
  align-content:space-around;
}
.item{
 width:100%;
}
.item:nth-child(1){
     order: 2;
}
.item:nth-child(2){
     order: 3;
}
.item:nth-child(3){
     order: 1;
}
.item:nth-child(4){
     order: 4;
}
.item:nth-child(5){
     order: 5;
}
}

中央に表示していたメインコンテンツをスマホ画面では一番上に表示させるため順番を切り替えました。このようにFlexboxを用いることで、一番目立たせたいコンテンツを画面によって一番目立つ位置に配置することができます。

Flexboxを用いたコンパクトなレスポンシブレイアウト

最後に、コンパクトで実用的なレスポンシブレイアウトを作成しました。
例４をみてください
例４　Flexboxを用いたレスポンシブレイアウト
以下コードです。
HTML

 <p>pc画面、スマホ画面両方で確認してみてください。</p>
        <div class="container">
          <div class="item">
            <h3>コンテンツ1</h3>
            <img src="/img/cloth1.jpg">
            <p>この文章はダミーです。以下省略</p>
          </div>
          <div class="item">
            <h3>コンテンツ2</h3>
            <img src="/img/cloth2.jpg">
            <p>この文章はダミーです。以下省略</p>
          </div>
          <div class="item">
            <h3>コンテンツ3</h3>
            <img src="/img/cloth3.jpg">
            <p>この文章はダミーです。以下省略</p>
          </div>
          <div class="item">
            <h3>コンテンツ4</h3>
            <img src="/img/cloth4.jpg">
            <p>この文章はダミーです。以下省略</p>
          </div>
          <div class="item">
            <h3>コンテンツ5</h3>
            <img src="/img/cloth5.jpg">
            <p>この文章はダミーです。以下省略</p>
          </div>
        </div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  margin: 0 0 10px;
}
.item{
  background: #FFEFD5;
  padding: 20px;
  flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 400px;
  margin: 10px;
}

PC時、スマホ時それぞれで最適なレイアウトを実現することができました。

PC画面では２つのコンテンツを並列させたレイアウトで、「flex-wrap: wrap;」を使用しコンテンツの改行を行っています。

また今回の場合コンテンツの数が奇数のため、コンテンツ５の片側に余白ができてしまいます。

そこで、「flex-grow: 1;」を使用しています。flex-growプロパティは、余白が存在する場合コンテンツを伸長して余白を埋めることができるプロパティです。このプロパティを利用して、コンテンツ５を伸長させて片側の不自然な余白を埋めました。

スマホ画面では２つのコンテンツを並列させたレイアウトのままだと窮屈なので、スマホ画面でベーシックな縦一列のレイアウトに変更しました。

このように、Flexboxを用いることでレスポンシブなレイアウトを少ないコードで作成することができます。