はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

CSS3 のflex(box) を使ってみる

CSS3 のflex(box) を使ってみる

CSS3 のflex(box) を使って見たのでメモ。

サンプル

codepen.io

対応ブラウザ

現時点(2015年6月1日)では、IE11, Firefox31, Chrome31, Opera28, Opera Mini8.0, Android Browser4.4, Chrome for Android42 に対応しているそうです。

Safari, iOS Safari では、ベンダープレフィックス-webkit-が必要なようです。

Can I use... Support tables for HTML5, CSS3, etc

配置方向 flex-direction

flex-direction で並べる方向を決めることができる。

  • flex-direction: row; 横に配置。左から右へ(デフォルト)。

  • flex-direction: row-reverse; 横に配置するが、右から左へ。

  • flex-direction: column; 縦に配置。上から下へ。

  • flex-direction: column-reverse; 縦に配置するが、下から上へ。

折り返し flex-warp

flex-wrap で折り返しをするかしないかを決めることができる。

  • flex-wrap: nowrap; 折り返しなし。ウィンドウを狭くしていくと折り返しされず、子要素(コンテンツ)の幅も狭くなっていく(デフォルト)。

  • flex-wrap: wrap; 折り返しあり。ウィンドウ幅 < 子要素全体の幅 のとき子要素一つ一つを自動的に次のカラムへ折り返す。 メディアクエリなしで切り替えてくれるのでとても便利!。上のサンプルでは基本これを使用。

  • flex-wrap: wrap-reverse; 折り返すが、折り返し方向が逆になる。下へ折り返すのが上へ折り返す。

伸びる倍率 flex-grow

子要素を並べて余りのスペースがある場合、それぞれの「flex-grow」の値に従い、自動的に利用可能な領域いっぱいまで伸びる

子要素に設定する。デフォルトでは設定なし。

すべての子要素を flex-grow: 1; にした場合、全ての子要素は同じ大きさで伸び縮みする。

1つの要素のみ flex-grow: 2; とし、他の要素を flex-grow: 1; としたとき、2:1の大きさの比率で伸び縮みする。

順番 order

デフォルトで order: 0;。値の小さい順番で並ぶ。同じ値の場合、HTMLの順番。

水平方向の揃え方 justify-content

justify-content で水平方向の揃え方を設定できる。

  • justify-content: flex-start; 横配置の場合、「左揃え」、縦配置の場合、「上揃え」(デフォルト)。

  • justify-content: flex-end; 横配置の場合、「右揃え」、縦配置の場合、「下揃え」。

  • justify-content: center; 中央揃え。

  • justify-content: space-between; 余りのスペースがある場合、均等にスペースを空ける。

  • justify-content: space-around; 余りのスペースがある場合、均等にスペースを空ける。 さらに、左右の端の子要素にも半分ずつ間隔を空ける。

広告を非表示にする