Flexboxの使い方

Tag:

Flexboxを利用しているサイトがちらほら確認できるようになってきたので、使い方について調べてみました。

例えば、「https://www.udemy.com/courses/」で利用されていました。

基礎知識

参考となるサイト

・MDN (Mozilla Developer Network)
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout

・W3C
http://www.w3.org/TR/css-flexbox-1/

・実用例の参考に
https://philipwalton.github.io/solved-by-flexbox/

・Autoprefixerでベンダープレフィックスへの対応
http://qiita.com/tonkotsuboy_com/items/377913c51b1ac00deffe
https://github.com/passy/autoprefixer-loader

仕様の変更

flexboxは過去に2回大きな仕様変更があったようです。

※仕様の変更
box仕様 ⇒ flexbox仕様(IE10でのみ実装) ⇒ flex仕様

ブラウザのサポート状況

http://caniuse.com/#search=flex

手軽に動作確認

https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

flexコンテナとflexアイテム

flexコンテナ:複数のflexアイテムを内包。
flexアイテム:flexコンテナを親要素にもつ

例を示します。下記コードをflexに対応させます。

containerクラスのスタイルに「display:flex」と定義することで、containerクラスの要素がflexコンテナになります。

flexコンテナで使えるプロパティ

プロパティ 概要 概要
flex-wrap 「子要素の合計幅」が「親要素の幅」を超えて複数行になる場合の設定 nowrap
(デフォルト)
幅が収まるように縮小して、折り返さない
wrap はみ出たものは下に折り返す
wrap-reverse はみ出たものは上に折り返す
flex-direction flexアイテムを並べる方向を設定 row
(デフォルト)
左から右へ、上から下へ
row-reverse 右から左へ、上から下へ
column 上から下へ、左から右へ
column-reverse 下から上へ、左から右へ
justify-content 横方向にスペースがあるときの位置揃えを設定
(flex-directionで横配置を指定しているとき)
flex-start
(デフォルト)
左揃え
flex-end 右揃え
center 中央
space-between 間隔空け(両端の隙間なし)
space-around 間隔空け(両端の隙間あり)
aligin-content 複数行になったときの行間隔を設定 stretch
(デフォルト)
flex-start 上揃え
flex-end 下揃え
center 中央
space-between 間隔空け(両端の隙間なし)
space-around 間隔空け(両端の隙間あり)
align-items flexアイテムを並べる軸を設定 stretch
(デフォルト)
flex-start 上揃え
flex-end 下揃え
center boxの高さで中央揃え
baseline テキストのラインで中央揃え

flexアイテムで使えるプロパティ

プロパティ 概要
order 表示順変更。小さいもの順。デフォルトは0。
flex-grow 空いたスペース分だけ、伸びる長さの比率を指定。デフォルトは0。
1つのflexアイテムだけに「flex-grow:1;」と定義すると、空いたスペースを全て、定義したflexアイテムで利用できる。
flex-shrink 縮む長さの比率を指定。
flex-basis
align-self 位置揃え。align-itemsより優先

個人的に、flexアイテムで利用しそうなのは、「orderプロパティ」と「flex-growプロパティ」ですかね。

スポンサーリンク