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

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

CSS3 flex(box) メモ

CSS3 flex(box) メモ

CSS3 のflex(box) を使ってみたのでメモ。 flexを使うことで,floatで悩んでいた水平方向の揃え,垂直方向の揃え,wrap後の揃え方などを調整でき,フレキシブルなレイアウトが可能になる.

サンプル(codepen)

floatを使わずとも以下のようなレイアウトがすぐできる.

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

現時点(2017年12月29日)では,以下のブラウザで対応している.

ドキュメント

配置方向 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;: 中身のコンテンツの大きさ以外に余白がある場合、均等にスペースを空ける。 さらに、左右の端の子要素にも半分ずつ間隔を空ける。

水平方向の揃え方 justify-content

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

  • justify-content: flex-start; 横配置の場合、「左揃え」、縦配置の場合、「上揃え」(デフォルト)
  • justify-content: flex-end;: 横配置の場合、「右揃え」、縦配置の場合、「下揃え」
  • justify-content: center;: 中央揃え
  • justify-content: space-between;: 中身のコンテンツの大きさ以外に余白がある場合、均等にスペースを空ける(左右の端には余白をとらない)。
  • justify-content: space-around;: 中身のコンテンツの大きさ以外に余白がある場合、均等にスペースを空ける。 さらに、左右の端の子要素にも半分ずつ間隔を空ける。

justify-content: between またはspace-aroundの余白うまく表示されない場合

以下の2点に注意する. - marginが指定されている - flex要素に:beforeまたは:after要素があり,content: ""が追加されているとその分余白ができてしまう.

参考:iwb.jp

垂直方向の揃え方 align-items

https://developer.mozilla.org/ja/docs/Web/CSS/align-items

  • align-items: stretch;:(デフォルト)アイテムを拡張する(親要素に高さを合わせる)

高さを指定している(ex. height: 100px;)場合,伸縮しないので注意. よって,heightは使わず,‘min-height`を使うと相性がいい.

`align-items: stretch;`

  • align-items: flex-start;:cross-start(上端) に合わせる

`align-items: flex-start;`

  • align-items: flex-end; : cross-end(下端) に合わせる

`align-items: flex-end;`

  • align-items: center;: cross-axis の中央に配置する(上下中央揃えにする)

`align-items: center;`

  • align-items: baseline;: アイテム(親)のベースラインに合わせる

`align-items: baseline;`