今回は、CSSで思い通りのレイアウトを可能とするFlexbox（フレックスボックス）の使い方を紹介します。
Flexbox（フレックスボックス）とは、簡単に言うとレイアウトを組むための専用のボックスモードです。
レイアウトと言ったら、「margin」「padding」「display」などを駆使しがちだが、Flexboxで囲った要素は1つのコードで様々なレイアウトの変更を可能とします。
種類が豊富なので覚えるのが大変だが、慣れると思い通りのレイアウトを簡単に作成でき、レスポンシブデザインに非常に向いているコーディング技術なのでほぼ必須で覚えるべき知識かと思います。
今回は使用頻度が特に高いものをいくつか紹介します。
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; /*高さ*/
/*ここにこれから紹介するプロパティを追記していく*/
}基本の形
次で紹介するCSSプロパティと値を使っていくことで、上記の子要素1~4の部分のレイアウトを自由に変更する事が出来ます。
justify-content
まずはよく使われる「justify-content」のプロパティです。
これは基本的な考え方で言うと横にレイアウトを移動させるプロパティです。（縦カラムになると縦になる。）
center
中央に寄せる指示。
justify-content: center;flex-end
最も右側に移動（デフォルトは最も左側。）
justify-content: flex-end;space-around
左右の幅とスペースを均等に。
justify-content: space-around;space-between
要素と要素の間を均等に。
justify-content: space-between;align-items
縦にレイアウトを動かしたい場合は「align-items」のプロパティを使用します。（縦カラムになると横に移動。）
center
縦軸の中央に。
align-items: center;flex-end
縦軸の最も下に移動。
align-items: flex-end;justify-contentとalign-itemsで中央に均等に
これまでのFlexboxを組み合わせて中央揃えで均一に並べています。このレイアウトパターンはかなり使われると思いますので、ここまでは必ずできる様になりたいところです。
<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;row-reverse
レイアウトを反転させる。
flex-direction: row-reverse;column-reverse
縦カラムにして、反転もする。
flex-direction: column-reverse;order
子要素の順番を変えたい場合は「order」を使って優先順位を付けていきます。
子要素に対して「order」で番号を付けていきます。デフォルトではすべて「0」として扱います。数値の高いものは右に移動します。
order: 1;下記の場合だと、「子要素92」「子要素93」に「order: 1;」が振られています。
全てを混ぜて縦に中央に
ここまでのものを色々と混ぜて縦カラムの中央。さらにレイアウトを反転し細かく順番も変更。
<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
<!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をコピペで使ってみて良いので自分で試してみて下さい。これを完全に理解して通過すると一段階レベルの上がった技術者となれます。
と言うより、コーダーの最初の登竜門かと思います。頑張って習得しましょう。
