【コピペOK】flexboxが便利すぎて止まらない！

まずはレイアウトでよく使うケースから

みなさん、flexbox使ってますかーーー？？

めちゃくちゃ便利ですよね。

flexboxについては後半に記すとして、早速汎用コピペ用♪

.●●● {
   display: -webkit-flex;
   display: -moz-flex;
   display: -ms-flex;
   display: -o-flex;
   display: flex;
   -webkit-flex-wrap:wrap;
   -ms-flex-wrap:wrap;
   flex-wrap:wrap;
}

上記がベース。

flex-wrapをすでに入れているのは、レスポンシブで組むことがほとんどなので、ある一定の幅になったら折り返してほしいし、折り返す必要がなければflex-wrapは発動しないので、基本入れっぱなし。

ここからよく使うものを追加していく感じ。

 

中央寄せ(中央から横並び)

justify-content: center;

左右ピッタリの均等割り

justify-content: space-between;

左右余白ありの均等割り

justify-content: space-around;

boxの中身関連

縦方向にセンタリング

align-items: center;

縦横中央寄せ

align-items: center;
text-align: center;

 

主に使うレイアウトは意外と限られている

上記汎用で、意外と多くのレイアウトが組めます。

matchHeight.jsを使わなくても、高さは自動で揃うし、縦方向のセンタリングもマイナスマージンやposition使わなくても一撃です。

レスポンシブに対応させようとするとちょっと遠回りなときもありますが、flexboxを使うようになってからほんと作業効率上がりました。

右から順番にとか、回り込みを反転など、別にflexbox使う使わない関係なく、ほぼほぼそんなケースに出会わない私は、上記で十分。

それ以外の便利な機能は、ググったら山ほど出てきますので（笑）

 

もう使ってもいいですよね？Flexbox

現行のモダンブラウザーでは問題なく利用できるんですよ。

でも、Safari用に -webkit- のベンダープレフィックスが必要です。
IEについては11から対応してます。
IE8,9(使ってる人に出会ったことないですが)は、flexibility.js使えば対応します。

今までは、仕様がコロッと変わっちゃったり、ブラウザ間での微妙な挙動も見受けられたので使用を控えていましたが、今はflexbox使ってサイトのレイアウトを組んでも、特にPC、スマホで問題が上がることもないので、しばらくはこのまま使っていくと思います。

flexboxがイケてるポイント

• floatなんて使わなくても横並びができる！
• 横並びになった要素の高さが自動で最初から揃っちゃう！
• 要素を好きな順序に並び替えられる（レスポンシブでは助かるよ）！
• 簡単に上下中央揃えができる！

使うしかないでしょ！