CSS3、ｆｌｅｘって便利（今さら

2017年7月29日

今さらですけど、
display:flex;
これ、便利です！
2カラム、3カラムのカラムレイアウトや、商品を並べたりするのに、昔はブロックを並べて
float:left;
に、clearfix＋fixHeightで高さ調節ってやってましたが、今は親要素に
display:flex;
これで高さも合わせてくれてjsもいらない。

ブラウザへの対応は

IEが10未満は未対応、スマホ用にベンダープレフィックスはつけたほうがよさそうです。

IE10未満に関してはサイトの方針次第で無視できる！

flex使い方いろいろ

display:flex; だけの場合

  • A
    A
  • B
  • C
  • D
  • E
  • F

display:flex; + flex-wrap:wrap;の場合

  • A
    A
  • B
  • C
  • D
  • E
  • F

display:flex; + flex-wrap:wrap-reverse;の場合

  • A
    A
  • B
  • C
  • D
  • E
  • F

display:flex; + flex-direction:row-reverse;の場合

  • A
    A
  • B
  • C
  • D
  • E
  • F

display:flex; + flex-direction:column; の場合

  • A
    A
  • B
  • C
  • D
  • E
  • F

display:flex; + flex-direction:column-reverse; の場合

  • A
    A
  • B
  • C
  • D
  • E
  • F

CSS, HTMLCSS3, flex

Posted by アツシオクムラ