読者です 読者をやめる 読者になる 読者になる

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

情報・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; 余りのスペースがある場合、均等にスペースを空ける。 さらに、左右の端の子要素にも半分ずつ間隔を空ける。

広告を非表示にする