CSSで思い通りのレイアウトを作成する方法：Flexboxまとめ

今回は、CSSで思い通りのレイアウトを可能とするFlexbox（フレックスボックス）の使い方を紹介します。

Flexbox（フレックスボックス）とは、簡単に言うとレイアウトを組むための専用のボックスモードです。
レイアウトと言ったら、「margin」「padding」「display」などを駆使しがちだが、Flexboxで囲った要素は1つのコードで様々なレイアウトの変更を可能とします。

種類が豊富なので覚えるのが大変だが、慣れると思い通りのレイアウトを簡単に作成でき、レスポンシブデザインに非常に向いているコーディング技術なのでほぼ必須で覚えるべき知識かと思います。

今回は使用頻度が特に高いものをいくつか紹介します。

Flexboxの基礎
justify-content
align-items
flex-direction
order
全てを混ぜて縦に中央に
聖杯レイアウト

Flexboxの基礎

Flexboxは対応しているブラウザでないと読み込みが効きません。下記のリンクでは対応ブラウザが確認できます。（現在はほとんどのブラウザで対応。）

対応ブラウザはこちら

Flexboxを使用するには。まずはFlexboxのコンテナを作成します。そのコンテナ内にある要素に様々なレイアウトに関するプロパティと値を付けていきます。

Flexboxのコンテナを作成するには下記の様に親要素（test_div）に「display: flex;」を指定するだけです。
サファリに対応させる場合は「-webkit-flex;」です。IEにも対応させる場合は「-ms-flexbox;」です。

「display: flex;」を指定すると「display: flex;無し」→「display: flex;有り」の様に綺麗に揃ってくれます。

次で、色々なプロパティと指定を紹介します。下記が今回紹介するHTMLとCSSの基本型です。

基本HTML

<div class="test_div">
<div class="c_div1">子要素01</div>
<div class="c_div2">子要素02</div>
<div class="c_div3">子要素03</div>
<div class="c_div4">子要素04</div>
</div>

基本CSS

.test_div {
    display: flex; /*これでレイアウト専用のボックスの完成*/
    display: -webkit-flex;　/*サファリ用*/
    display: -ms-flexbox;　/*IE用*/
    background: rgba(107, 107, 107, .1);　/*わかりやすく背景色を*/
    width: 100%;　/*幅*/
    height: 300px;　/*高さ*/
    /*ここにこれから紹介するプロパティを追記していく*/
}

基本の形

子要素01

子要素02

子要素03

子要素04

次で紹介するCSSプロパティと値を使っていくことで、上記の子要素1~4の部分のレイアウトを自由に変更する事が出来ます。

justify-content

まずはよく使われる「justify-content」のプロパティです。
これは基本的な考え方で言うと横にレイアウトを移動させるプロパティです。（縦カラムになると縦になる。）

center

中央に寄せる指示。

justify-content: center;

子要素01

子要素02

子要素03

子要素04

flex-end

最も右側に移動（デフォルトは最も左側。）

justify-content: flex-end;

子要素11

子要素12

子要素13

子要素14

space-around

左右の幅とスペースを均等に。

justify-content: space-around;

子要素21

子要素22

子要素23

子要素24

space-between

要素と要素の間を均等に。

justify-content: space-between;

子要素31

子要素32

子要素33

子要素34

align-items

縦にレイアウトを動かしたい場合は「align-items」のプロパティを使用します。（縦カラムになると横に移動。）

center

縦軸の中央に。

align-items: center;

子要素41

子要素42

子要素43

子要素44

flex-end

縦軸の最も下に移動。

align-items: flex-end;

子要素51

子要素52

子要素53

子要素54

justify-contentとalign-itemsで中央に均等に

これまでのFlexboxを組み合わせて中央揃えで均一に並べています。このレイアウトパターンはかなり使われると思いますので、ここまでは必ずできる様になりたいところです。

子要素101

子要素102

子要素103

子要素104

<div class="test_div100">
<div class="c_div101">子要素101</div>
<div class="c_div102">子要素102</div>
<div class="c_div103">子要素103</div>
<div class="c_div104">子要素104</div>
</div>

.test_div100{
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    background: rgba(107, 107, 107, .1);
    width: 100%;
    height: 300px;
    justify-content: center;
    align-items: center;
    text-align: center;
    justify-content: space-around;
}
.c_div101{
    background: rgba(138, 96, 96, .5);
    width: 80px;
    height: 80px;
}
.c_div102{
    background: rgba(240, 248, 255, .7);
    width: 80px;
    height: 80px;
}
.c_div103{
    background: rgba(240, 255, 241, .7);
    width: 80px;
    height: 80px;
}
.c_div104{
    background: rgba(255, 253, 240, .7);
    width: 80px;
    height: 80px;
}

flex-direction

レイアウトの方向を変えたい場合は「flex-direction」を使っていきます。

column

縦方向（縦カラム）に変更。

flex-direction: column;

子要素61

子要素62

子要素63

子要素64

row-reverse

レイアウトを反転させる。

flex-direction: row-reverse;

子要素71

子要素72

子要素73

子要素74

column-reverse

縦カラムにして、反転もする。

flex-direction: column-reverse;

子要素81

子要素82

子要素83

子要素84

order

子要素の順番を変えたい場合は「order」を使って優先順位を付けていきます。

子要素に対して「order」で番号を付けていきます。デフォルトではすべて「0」として扱います。数値の高いものは右に移動します。

order: 1;

下記の場合だと、「子要素92」「子要素93」に「order: 1;」が振られています。

子要素91

子要素92

子要素93

子要素94

全てを混ぜて縦に中央に

ここまでのものを色々と混ぜて縦カラムの中央。さらにレイアウトを反転し細かく順番も変更。

子要素201

子要素202

子要素203

子要素204

<div class="test_div200">
<div class="c_div201">子要素201</div>
<div class="c_div202">子要素202</div>
<div class="c_div203">子要素203</div>
<div class="c_div204">子要素204</div>
</div>

.test_div200{
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    background: rgba(107, 107, 107, .1);
    width: 100%;
    height: 400px;
    flex-direction: column-reverse;
    justify-content: center;
    justify-content: space-around;
    align-items: center;
}
.c_div201{
    background: rgba(138, 96, 96, .5);
    width: 80px;
    height: 80px;
}
.c_div202{
    background: rgba(240, 248, 255, .7);
    width: 80px;
    height: 80px;
    order: 1;
}
.c_div203{
    background: rgba(240, 255, 241, .7);
    width: 80px;
    height: 80px;
    order: 1;
}
.c_div204{
    background: rgba(255, 253, 240, .7);
    width: 80px;
    height: 80px;
}

聖杯レイアウト

最後にflexboxを使った3カラムのよくあるレイアウトの構築を紹介します。このレイアウト構築を「聖杯レイアウト」と言います。（下記の様なレイアウトの事です。）

HTML/CSS

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>グリッド見本</title>
    <link rel="icon" href="">
    <meta name="description" content="">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <header class="header">ヘッダー</header>
      <div class="content-body">
        <main class="content">コンテンツ</main>
        <nav class="left">左サイドバー</nav>
        <aside class="right">右サイドバー</aside>
      </div>
      <footer class="footer">フッター</footer>
    </div>
  </body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  flex: 0 0 50px;
  background-color: brown;
}
.content-body {
  flex: 1 1 auto;
  
  display: flex;
  flex-direction: row;
}
.content-body .content {
  flex: 1 1 auto;
  overflow: auto;
  background-color: blue;
}
.content-body .left {
  order: -1;
  flex: 0 0 300px;
  overflow: auto;
  background-color: rgb(0, 255, 21);
}
.content-body .right {
  flex: 0 0 300px;
  overflow: auto;
  background-color: rgb(238, 255, 0);
}
.footer {
  flex: 0 0 100px;
  background-color: #777;
}

以上が「CSSで思い通りのレイアウトを作成する方法：Flexboxまとめ」でした。

Flexboxはなかなか理解しづらい部分ですので、今回紹介したHTML/CSSをコピペで使ってみて良いので自分で試してみて下さい。これを完全に理解して通過すると一段階レベルの上がった技術者となれます。

と言うより、コーダーの最初の登竜門かと思います。頑張って習得しましょう。