Flexboxはじめの一歩

Flexboxはじめの一歩

こんにちは。ひっでもんです。

今回はFlexboxの使い方をざっくり紹介していきます。※ざっくり紹介したいがためにクロスブラウザ対応については書かないでおこうと思いますのでご了承ください。

 

目的

各li要素をulの幅内で均等に表示させたい。

完成図

下記のコードを例に説明していきます。

 

①ul要素にdisplay: flex;を設定する。

display: flex;を記述することによってulは「Flexboxコンテナー」として扱われるようになり、各プロパティがデフォルトで設定されます。(内部的に)

 

②ul要素にjustify-content: space-between;を設定する。

これをつけることによって直下の子要素が均等に配置されます。そのほかにも中央配置等、いろいろあります。

 

③liにflex-grow: 1;を設定する。

「Flexboxコンテナー」直下の子要素は「Flexboxアイテム」として扱われるようになり、各プロパティを設定できるようになります。liにflex-grow: 1;を設定することにより各liの幅を均等に伸ばすことが出来ます。(width:100%;でもOK)

 

まとめ

今回プロパティは3つしか使わなかったのでとても簡単でした。細かい設定やクロスブラウザ対応用のプロパティが無ければ意外とシンプルですぐに覚えられそうです。

「要素をただ横並びにしたいだけなんです」という時もFlexboxを使うようにしていきましょう!


Previous: Chrome拡張機能でルーチンワークを自動化しよう  -実装編- Next: デザイナーから見た、ユーザーをぐっと惹きつけるコピーライティング

© 2017 ALL CONNECT Inc. All Rights Reserved.