flexbox は、div の box を横に並べるためのブラウザに標準装備されてるクラス。
乱暴な言い方すればそういうことです。現場では細かいことはどうでもよくて、とにかく簡単に DIV BOX を横に並べることができればなんでもいい。

flexbox で子要素を横に並べる

とりあえず、DIV BOX を横に並べたいなら、こう書けばOK。
HTML

<div style="display:flex; border:1px solid #ccc;">
<div style="border:1px solid #ccc;">A</div>
<div style="border:1px solid #ccc;">B</div>
<div style="border:1px solid #ccc;">C</div>
</div>

※わかりやすくするために border をつけています。


ポイントは、display:flex このスタイルの box の中にはいった ボックスは横に並びます。

見栄えを良くするために普通はクラスにして例示してますけど、その時のクラス名に flexbox を使うので勘違いしますけど、style display:flex; と入れればOKということです。

基本左寄りで float:left と float:left のクリアのセットとおなじ。
ところが flex box が便利なのは、親となる display:flex; をつけた div の中の子供をセンタリング、右寄せさせるのが簡単。

flexbox で子要素の位置合わせ

style の justify-content に以下のそれぞれを設定するだけです。

• flex-start：左寄せ
• flex-end:右寄せ
• flex-center:中央寄せ
• space-between:均等割り
• space-around:均等間隔中央委寄せ
• space-evenly

flex-start：左寄せ

flex-end:右寄せ

flex-center:中央寄せ

space-between:均等割り

space-around:均等間隔中央委寄せ

space-evenly:均等間隔中央委寄せ

flexbox でレスポンシブをサポート

flexbox は、レスポンシブデザインの～みたいな印象ですけど、実は違います。
前述のように box を横に並べるスタイルです。

でも flexbox には便利なスタイルがあります。
それが折り返し。

flex-wrap: warp;

です。

flex-warp を付けないとこうなります。

<div class="flexbox">
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">A1</div>
<div class="item">B1</div>
<div class="item">C1</div>
<div class="item">A2</div>
<div class="item">B2</div>
<div class="item">C2</div>

<style>
.flexbox{display:flex;}
.item{width:100px;}
</style>

flex-warp を付けるとこうなります。

<div class="flexbox">
<div class="item">AAAAAAAAAA</div>
<div class="item">BBBBBBBBBB</div>
<div class="item">CCCCCCCCCC</div>
<div class="item">AAAAAAAAAA1</div>
<div class="item">BBBBBBBBBB1</div>
<div class="item">CCCCCCCCCC1</div>
<div class="item">AAAAAAAAAA2</div>
<div class="item">BBBBBBBBBB2</div>
<div class="item">CCCCCCCCCC2</div>
</div>
<style>
.flexbox{display:flex;flex-wrap: wrap;}
.item{width:100px;}
</style>

本当にレスポンシブにしたいなら。

一応、枠サイズで折り返すことはできてもh権頭の意味でレスポンシブにするときには、やはり @media で item の幅を変えてあげないと無理が出ます。

<div class="flexbox">
<div class="item">AAAAAAAAAA</div>
<div class="item">BBBBBBBBBB</div>
<div class="item">CCCCCCCCCC</div>
<div class="item">AAAAAAAAAA1</div>
<div class="item">BBBBBBBBBB1</div>
<div class="item">CCCCCCCCCC1</div>
<div class="item">AAAAAAAAAA2</div>
<div class="item">BBBBBBBBBB2</div>
<div class="item">CCCCCCCCCC2</div>
</div>
<style>
.flexbox{display:flex;flex-wrap: wrap;}
.item{width:100px;}
@media screen and (min-width: 641px) and (max-width: 768px) {
.item{width:100%;}
}
@media screen and (max-width: 640px) {
.item{width:100%;}
}
</style>

flexbox でのレスポンシブは、定型セットで以下のように覚えておきます。

<style>
.flexbox{
display:flex;
flex-wrap: wrap;
}
.item{
}
@media screen and (min-width: 641px) and (max-width: 768px) {
.item{width:100%;}
}
@media screen and (max-width: 640px) {
.item{width:100%;}
}
</style>

flexbox で子要素の高さをあわせる

flex box では、子要素の高さ合わせは標準で行われます。

意図的に高さを変える場合には、以下のようなスタイルがあります。

• align-self
• auto:(デフォルト) 親要素の高さに合わせる
• stretch:コンテンツの一番多い子要素に合わせる
• flex-start:親BOXの中で上揃え
• flex-end:親BOXの中で下合わせ
• center:親BOXの中で中央揃え
• baseline:ベースライン合わせ

flexbox でできること

flexbox でできることは、このほかにも逆並びにするとか様々ありますが、つかうかなぁ？って思いますので、とりあえず前述のことだけを記憶して、そういえばできたよねぇ～程度でいいと思います。

flexbox のまとめ

flexbox の中で常に使うものは、以下にまとめます。

つまり、
display:flex;
flex-wrap:warp;
@media screen and (min-width: 641px) and (max-width: 768px) {}
@media screen and (max-width: 640px) {}
の4行。

あとは必要なときに調べればいい。
逆にいえば工数をかけてまでこだわる必要があるのなら、って感じです。