Flexboxで簡単レイアウト

Flexboxで簡単レイアウト

Flexboxがとても便利そうなので、よく理解して使うための私なりの復習です!!
今回はよく使うデザインでflexboxを使うと簡単になると思ったレイアウトを紹介したいと思います 😀

flexboxとは

Flexboxとは今までの横並びレイアウトcssとは違ってcssをたった1行追加するだけで横並びしてくれます!
しかも様々なスクリーンサイズやディスプレイデバイスに適応しなければならない場合、ページ上の要素が指定した通りに配置される レイアウトモード です。
レスポンシブデザインにも利便性が高いと思います。

対応ブラウザ

コチラから確認できます ➡
http://caniuse.com/#search=flex

現時点では、IE8・9は対応していないのと、
Safari用に -webkit- のベンダープレックスが必要みたいです。。。

flexboxでできること

  • flex-direction:子要素の配置方向
  • flex-wrap:子要素の折り返し設定
  • justify-content:水平方向の揃え方
  • align-items:垂直方向の揃え方
  • align-content:行の揃え方
  • flex:伸縮性設定全般
  • align-self:個別のFlexアイテムの垂直方向の揃え方
  • order:順番指定

こんなにたくさんあるんですね~ 😯

flexboxを使うと簡単になるレイアウト

3カラムなどのレイアウト

See the Pen zKOBmL by NaomiMatsukawa (@Naomi611) on CodePen.

なんと!!
今までは横に並んだ要素の高さを揃えるのにheightを指定したりjsを使用していましたが、
高さの違うボックスでも自動的に一番長いボックスに合わせてくれます 😆
justify-content: space-between;
を記入することで、アイテムを均等に配置してくれ最初のアイテムは始端に、最後のアイテムは終端に配置されます 。
flex-wrap: wrap;
は複数行にわたり改行して表示されるので3カラムから数がどんどん増えていってもコンテンツ内で改行して表示されていきます。調節はwidthで指定してください。

 

上下中央のコンテンツ

See the Pen qaWaXB by NaomiMatsukawa (@Naomi611) on CodePen.


最近はdisplay:table;を使っていましたが、flexでの指定の仕方の方が私は断然好きです。

align-items:center;
を記入することで、上下中央に中のコンテンツが配置されます。

 

ボタンを右下に持ってくる

See the Pen yJvvPq by NaomiMatsukawa (@Naomi611) on CodePen.

今までは細かくボックスで区切って調整したり、positionで指定したりと大変だったのですが、ボタンの親要素にalign-selfのflex-endを書くだけで左下に配置されます。

flex-direction: column;
を記入することで、子要素はHTMLの書き順で、上から下に配置されます。
align-self: flex-end;
を指定すると中の要素が右寄せになります。

まとめ

うまくまとめられていないかもしれませんが、とにかくflexboxは便利だ!!と伝わればいい感じですww
自分なりに今回色々調べてみて、flexboxはかなり奥が深いなと思いました 😎
もっと実際に使ってみて、さらに理解を深めていきたいですー!
絶対みんな今後バンバン使うでしょう 🙄

 


Previous: すべての人が同じように感じる「デザイン要素」とは? Next: Photoshopを使ったWebサイト ラフデータの作り方 ~カンバス編~

© 2017 ALL CONNECT Inc. All Rights Reserved.