flexボックスの作り方

CSS3から、要素を横並びにする際に、float以外にもいくつかの選択肢ができました。
その中から、使用頻度の高いflexボックスの使い方を紹介します。
様々なプロパティが用意され、非常に煩雑ですが、実はよく使うプロパティは数種類で十分です。よく使うものを重点的に覚えていきましょう。

1.基本的な使い方

横並びにしたい要素の親要素に対して、display:flexを指定します。
※今回は、横幅500pxのコンテナーの中に、横幅100pxのブロックが4つある状態で考えていきます。

HTML
<body>
<div class="flex-oya">
<div class="flex-ko blue">1</div>
<div class="flex-ko red">2</div>
<div class="flex-ko green">3</div>
<div class="flex-ko yellow">4</div>
</div>
</body>

CSS
div {
box-sizing: border-box;
}

.blue {
background-color: blue;
}

.red {
background-color: red;
}

.green {
background-color: green;
}

.yellow {
background-color: yellow;
}

.flex-oya {
width: 500px;
height: 500px;
border: 1px solid #eee;
margin-left: auto;
margin-right: auto;
display: flex;
}

.flex-ko {
width: 100px;
height: 100px;
}

コードの解説をしていきます。まずは、HTMLから。
クラス、flex-oyaが付加されたdivが、横並びにしたい要素の親要素です。
クラス、flex-koが付加されたdivが、横並びにしたい要素です。
基本的に、flexボックスを使って、要素を横並びにしたいときは、横並びにしたいものを括っている（親要素）ものが必要になります。（divタグじゃなくてもいいです）
この作り方は、floatで要素を横並びにした時と同じ様な作り方です。

floatとclear

次にCSSの解説です。
まず、box-sizingをborder-boxに指定しています。ボーダーを含めて横幅の長さとしてくれた方が、計算がしやすいので指定しています。

div {
box-sizing: border-box;
}

次に、各子要素（横並びにしたいdiv）に、色分けしてわかりやすくするために、一つ一つバラバラの背景色を指定しています。

.blue {
background-color: blue;
}

.red {
background-color: red;
}

.green {
background-color: green;
}

.yellow {
background-color: yellow;
}

親要素のflex-oyaに、横幅や中央揃えの設定をしていきます。ボーダーは、コンテンツの縁がわかりやすい様に作っています。
そして、今回の肝であるdisplay:flexを指定し、内側の要素を横並びにしていきます。

.flex-oya {
width: 500px;
border: 1px solid #eee;
margin-left: auto;
margin-right: auto;
display: flex;
}

最後に、子要素ひとつひとつの横幅と高さを指定します。

.flex-ko {
width: 100px;
height: 100px;
}

ひとまずここまでで、キャプチャ画像の様に、子要素が横に並んだのがわかると思います。

ただし、このままでは少し問題があるので、追記していきます。
子要素が、横並びにはなっていますが、左揃えになってしまっています。
これを、親要素の幅に合わせて均等に配置したいです。

.flex-oya {
〜略〜
display: flex;
justify-content: space-between;
}

上記の様に、justify-content: space-between;を親要素に追記すれば、水平方向に均等に配置されます。

基本的な使い方は、この様になります。
floatと違って、clearをする必要はありません。

2.子要素が増えた場合の折り返し

子要素の数が増えていって、親要素の横幅よりも、子要素の合計の横幅の方が大きくなってしまった場合の処理についてです。
1で作った横並びのサンプルのHTMLを以下の様に修正してみます。

HTML
<div class="flex-oya">
<div class="flex-ko blue">1</div>
<div class="flex-ko red">2</div>
<div class="flex-ko green">3</div>
<div class="flex-ko yellow">4</div>
<div class="flex-ko yellow">5</div>
<div class="flex-ko green">6</div>
<div class="flex-ko red">7</div>
<div class="flex-ko blue">8</div>
</div>

子要素の数を倍にします。
すると、以下の様に表示されます。

flexボックスは、何も設定しないと、内側にある子要素を全て横並びにしてしまいます。
しかも、その子要素の横幅は、親要素の中に収まるのであれば反映されますが、（今回の場合は、width:100px）子要素の数が多くなり、その子要素の横幅全体が親要素を超えてしまった場合、勝手に縮んでしまいます。
今回の場合は、4つずつ折り返す形で表示してほしいです。
以下のプロパティを親要素に追加します。

.flex-oya {
〜略〜
display: flex;
justify-content: space-between;
flex-wrap:wrap;
}

親要素の幅よりはみ出す分は、下に折り返される様になります。
ひとまず、以上の設定で想定した表示になりました。

とりあえず、ここまで覚えておけば、かなり汎用的に使えると思います。

3.各プロパティと設定方法

flexボックスがらみのプロパティには、親要素にかける物と、子要素（横並びになる物）にかけるものがあります。
今回使った、justyfy-contentとflex-wrapは、いずれも親要素にかけるプロパティです。

3-1.justyfy-content

「justify-content」プロパティは、水平方向の並び方を決められるプロパティです。

設定できる値は、以下のものがあります。
※以下の表以外にもありますが、使いそうなものだけピックアップしています。

flex-start	左側に揃う
flex-end	右側に揃う
center	中央に揃う
space-between	最初と最後のアイテムは端に、残りは等間隔で配置されます。
space-around	等間隔で配置されます。

3-2.flex-wrap

「flex-wrap」プロパティは、子要素が、横に並ぶか縦に並ぶかを決めます。

nowrap	横一列に並ぶ
wrap	折り返す

3-3.align-items

前述の例では、使用していませんが、「align-items」では、要素の高さを揃えることができます。
floatでの横並びでは実現不可能な、とても強力な機能です。

以下のコードで解説します。

HTML
<div class="flex-oya">
<div class="flex-ko blue">1</div>
<div class="flex-ko red">2</div>
<div class="flex-ko green">3</div>
<div class="flex-ko yellow">4</div>
</div>

CSS
.flex-oya {
width: 500px;
height: 300px;/*高さを設定*/
border: 1px solid #eee;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

.flex-ko {
width: 100px;
/* height: 100px; 高さは設定しない*/
}

align-itemsを何も設定しないときは、初期値である、stretchが適用されています。
子要素の高さは、親要素の高さいっぱいまでになります。

flex-startを適用すると、親要素の上に配置されます。
floatした時と、近い挙動になります。

CSS
.flex-oya {
〜省略〜
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items:flex-start;
}