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

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

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

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;」を適用させただけだとコンテンツが横並びになっただけですが、親要素、子要素それぞれに適宜プロパティを適用していくことでさまざまな形にレイアウトを変形させることができます。

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

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

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

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

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を用いることでレスポンシブなレイアウトを少ないコードで作成することができます。

まとめ

Flexboxを用いてレスポンシブなサイトを作成することができました。Flexboxは上記のようにプロパティが豊富に存在するので自由度が高く、クオリティの高いレイアウトを作成することができる可能性を秘めています。

ぜひ、今回の記事を参考に、ご自身のサイトにFlexboxを導入してみてください。