HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

flexbox インストールなど面倒なことなしにDIV BOX を横に並べるクラス

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 をつけています。

A
B
C

ポイントは、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:左寄せ
A
B
C
D

flex-end:右寄せ
A
B
C
D

flex-center:中央寄せ
A
B
C
D

space-between:均等割り
A
B
C
D

space-around:均等間隔中央委寄せ
A
B
C
D

space-evenly:均等間隔中央委寄せ
A
B
C
D


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

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

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

flex-wrap: warp;

です。

flex-warp を付けないとこうなります。
AAAAAAAAAA
BBBBBBBBBB
CCCCCCCCCC
AAAAAAAAAA1
BBBBBBBBBB1
CCCCCCCCCC1
AAAAAAAAAA2
BBBBBBBBBB2
CCCCCCCCCC2


<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 を付けるとこうなります。
AAAAAAAAAA
BBBBBBBBBB
CCCCCCCCCC
AAAAAAAAAA1
BBBBBBBBBB1
CCCCCCCCCC1
AAAAAAAAAA2
BBBBBBBBBB2
CCCCCCCCCC2

<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 では、子要素の高さ合わせは標準で行われます。
AAAA
AAA
AAA
BBBBB
BBBBB
CCCCCCCCCC
AA
AAA
AAA
AA1

意図的に高さを変える場合には、以下のようなスタイルがあります。
  • 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行。

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

スポンサーリンク

スポンサーリンク

カテゴリー