最終更新日 2021.09.5
CSS

CSSのflexを使ったサンプルをご紹介！Flexboxで実現できるレイアウトを確認

CSSのFlexbox（フレックスボックス）をそろそろ取り入れていこうかな～という方も多くなってきたんじゃないでしょうか？

主な目的としては要素の横並びに使われることが多いです。今まで横並びには「float」や「display:inline-block」がメインでしたがこれからは「display:flex」でしょうね。

Flexboxを使う際には便利な付属プロパティがいくつもありますので、今回はどんな効果が得られるのかをサンプルと合わせて一緒に確認していきましょう。

目次 [閉じる]

Flexboxの特徴
flex-directionプロパティの使い方
flex-wrapプロパティの使い方
flex-flowプロパティの使い方
justify-contentプロパティの使い方
align-itemsプロパティの使い方
align-contentプロパティの使い方

Flexboxの特徴

「flex」を使用する際は横並びにしたい要素の親要素に「display:flex」の指定をおこないますので注意してください。

「float」などは横並びにしたい要素に直接指定するので、それに慣れてる方はココが間違えやすいです。僕も横並びは「display;inline-block」ばっかりなので良くやらかします（笑）。

「flex」は現段階でもうほぼほぼどのブラウザにも対応しています。「Can I use…」のサイトで確認できるので「対応ブラウザ」から対応状況をご確認ください。

index.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <title>Flexboxを使ってみよう</title>
                <style>
                * {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box
                }
                 
                html {
                  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
                  font-size: 62.5%;
                  letter-spacing: 0.09em;
                  font-feature-settings: "palt"
                }
                 
                ul {
                  padding: 10px;
                  display: flex
                }
                 
                li {
                  width: 80px;
                  height: 80px;
                  color: #fff;
                  line-height: 80px;
                  text-align: center
                }
                 
                li:nth-child(1) {
                  background: #c72222
                }
                 
                li:nth-child(2) {
                  background: #74c722
                }
                 
                li:nth-child(3) {
                  background: #22c7c7
                }
                 
                li:nth-child(4) {
                  background: #7422c7
                }
                </style>
                </head>
                <body>
                  <ul>
                    <li>要素A</li>
                    <li>要素B</li>
                    <li>要素C</li>
                    <li>要素D</li>
                  </ul>
                </body>
                </html>

まずはベースとなるHTMLとCSSの設定を見ていきます。「display:flex」を使って4つの要素を横並びにしてみました。

要素A
要素B
要素C
要素D

わかりやすくするために灰色の背景色を追加しています。次項からはこのベースを使って「flex」に追加できる付属プロパティの効果を確認していきます。

flex-directionプロパティの使い方

「flex-direction」は要素の並び順を指定します。左右はもちろん上下の設定も可能です。

row: 左から右へ並び順を指定します。デフォルトが「row」の状態です。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-direction: row
                }

row-reverse: 右から左へ並び順を指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-direction: row-reverse
                }

column: 上から下へ並び順を指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-direction: column
                }

colmn-reverse: 下から上へ並び順を指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-direction: column-reverse
                }

flex-wrapプロパティの使い方

「flex-wrap」は要素の折り返しを指定します。折り返しの設定は上から下に折り返す方法の他に、下から上へ折り返して表示する方法もあります。

折り返しが確認できるように値が「wrap」と「wrap-reverse」のサンプルには「li」の横幅を「80px」から「50%」に変更しています。

nowrap: 折り返し無しを指定します。デフォルトが「nowrap」の状態です。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-wrap: nowrap
                }

wrap: 上から下への折り返しを指定します。要素は左上から表示されます。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-wrap: wrap
                }
                 
                li {
                  width: 50%
                }

wrap-reverse: 下から上への折り返しを指定します。要素は左下から表示されます。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-wrap: wrap-reverse
                }
                 
                li {
                  width: 50%
                }

flex-flowプロパティの使い方

「flex-flow」は要素の並び順と折り返しを指定します。「flex-direction」と「flex-wrap」を合わせて記述する事ができます。

「flex-wrap:wrap」では左上から要素は右へ並び、折り返すと左下から右へ並びますが、「flex-direction:row-reverse」と合わせると逆に右上から左へ並べて折り返す形を作る事ができます。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-flow: row-reverse wrap
                }
                 
                li {
                  width: 50%
                }

せっかくなんで「flex-direction:row-reverse」と「flex-wrap:wrap-reverse」を合わせた形も確認しておきましょう。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-flow: row-reverse wrap-reverse
                }
                 
                li {
                  width: 50%
                }

「flex-flow」には「flex-directionの値」と「flex-wrapの値」の間に半角スペースを空けて記述します。記述順は「flex-directionの値」が先でも「flex-wrapの値」が先にきても構いません。

justify-contentプロパティの使い方

「justify-content」は要素の水平方向の位置を指定します。左揃え・中央揃え・右揃えの指定と水平方向の等間隔配置などが設定できます。

flex-start: 左揃えを指定します。デフォルトが「flex-start」の状態です。

要素A
要素B
要素C
要素D

            
                ul {
                  justify-content: flex-start
                }

flex-end: 右揃えを指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  justify-content: flex-end
                }

center: 中央揃えを指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  justify-content: center
                }

space-between: 両端の要素は余白を入れずにその他の要素は均等間隔で配置します。

要素A
要素B
要素C
要素D

            
                ul {
                  justify-content: space-between
                }

space-around: すべての要素を均等間隔で配置します。

要素A
要素B
要素C
要素D

            
                ul {
                  justify-content: space-around
                }

align-itemsプロパティの使い方

「align-items」は要素の垂直方向の位置を指定します。わかりやすくするために各要素の高さを変更しています。

要素A（赤）は高さ160px、要素B（黄緑）は高さ60px、要素C（水色）は高さ100px、要素D（紫）は高さ80pxです。「stretch」のサンプルだけ「li」の高さ指定は無しにしてflexの指定をしている「ul」の高さを160pxにしました。

stretch: flexboxの高さに合わせて要素の高さも拡張します。デフォルトが「stretch」の状態です。

要素A
要素B
要素C
要素D

            
                ul {
                  align-items: stretch
                }

flex-start: 上揃えを指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  align-items: flex-start
                }

sflex-end: 下揃えを指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  align-items: flex-end
                }

center: 中央揃えを指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  align-items: center
                }

baseline: ベースライン揃えを指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  align-items: baseline
                }

「center」と「baseline」の区別が付きやすいように「baseline」の要素A（赤）を「line-height:200px」にしてみました。中央よりも少し下にテキストが配置されているんですが、このベースラインに合わせて他の要素も整列されるようになります。

align-contentプロパティの使い方

「align-content」は要素のクロス軸方向の位置を指定を指定します。折り返した要素との位置を調整しますので「flex-wrap: wrap」の設定も追加します。

こちらもわかりやすくするために「li」の横幅は「50%」にしてflexの指定をしている「ul」の高さを「260px」に変更しました。

stretch: flexboxの高さに合わせて要素の高さも拡張します。デフォルトが「stretch」の状態です。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-wrap: wrap;
                  align-content: stretch
                }
                 
                li {
                  width: 50%
                }

flex-start: 上揃えを指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-wrap: wrap;
                  align-content: flex-start
                }
                 
                li {
                  width: 50%
                }

flex-end: 下揃えを指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-wrap: wrap;
                  align-content: flex-end
                }
                 
                li {
                  width: 50%
                }

center: 中央揃えを指定します。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-wrap: wrap;
                  align-content: center
                }
                 
                li {
                  width: 50%
                }

space-between: 上端・下端の要素は余白を入れずにその他の要素は均等間隔で配置します。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-wrap: wrap;
                  align-content: space-between
                }
                 
                li {
                  width: 50%
                }

space-around: すべての要素を均等間隔で配置します。

要素A
要素B
要素C
要素D

            
                ul {
                  flex-wrap: wrap;
                  align-content: space-around
                }
                 
                li {
                  width: 50%
                }