自動化厨のプログラミングメモブログ│CODE-LIFE

Python/ExcelVBA/JavaScript/Raspberry Piなどで色んなことを自動化

HTML要素を超簡単に横並びにできるCSSの書き方 Flexbox

この記事でできるようになること

  • divやliの表示をキレイに簡単に横並びにできる

去年(2016年)くらいまでは未だ使うのは早いかなというような状況だったFlexible Box Layout(フレキシブルボックスレイアウト)。通称flexbox。 そろそろ使っても良いんじゃないでしょうか。

Flexboxのブラウザ対応状況

f:id:maru0014:20171119175621p:plain

参考: Can I use... Support tables for HTML5, CSS3, etc

 

(例)Flexboxで要素を横並びに

See the Pen flexbox by maru (@maru0014) on CodePen.

キレイにdiv要素が横並びになってますね。6つの子要素が横並びになっていますが、width(幅)指定は100%です。 width:calc(100%/6);でもなく、width:16.666667%;でもありません。これもFlexboxのすごいところ。 display:flex;が指定された親要素を持つ子要素は6等分のサイズを指定しなくてもいいかんじに等分してくれます。

7つ目の子要素を足そうが、8つ目を足そうが、改行されることなく横並びに。 そしてfloat:left;と違ってclearfix不要です。素晴らしい。

 

使い方は親要素に一行追記するだけ

.row {
  display: flex;/*これを入れるだけで横並び*/
  background: #ccc;
}

前述した実装例でもdisplay: flex;CSSに追記してあります。 超絶楽です。

 

3つごとに改行(3等分)にしたい場合はflex-wrap:wrap;を追記

flexbox化した親要素の属性にflex-wrap:wrap;を追記すると回り込み(改行)が有効化されます。

.row {
  display: flex;
  flex-wrap:wrap;/*回り込み有効化*/
  background: #ccc;
}

そしてfloat:left;の時のように子要素のサイズを指定

.col {
  width: calc(100% / 3);/*3等分*/
}

(例)子要素をキレイに3列で表示

See the Pen flexbox-wrap by maru (@maru0014) on CodePen.

いかがでしょうか。 今までfloat:left;で横並びにして、サイズ指定して、clearfixして、という作り方だったものが3つのプロパティだけで実装できてしまいました。