どうも、はぐっです・ω・♪
はじめに
「display flex」
「flexbox 使い方」
もうこんな検索かけたら、えぐいぐらいの数の記事が引っかかるかと思います。
なので、よく書いてあることはだいぶざっくりめに進めていきます。
私はもともとwebのフロントエンドエンジニアだったのですが、現在はiOSエンジニアとして働いています。
そのため、webを書く機会は減っていたのですが、この間久々にしっかりしたwebサイトをコーディングする機会があり、
flex使ってみよー・ω・♪
って感じで使ってみたら案外というかすげぇいい感じだったので、記事にしようと決意の朝に。
flexboxって？
今まで面倒だったレイアウトたちの攻撃力をほぼ0にしてくれる、
(ドラゴンクエストライバルズでいうとアンルシアのような)
優秀なレイアウトの組み方。
比較的新しいものなので、古いブラウザに対応しないといけないあなたは・・・
みんな仲良しCan I use！
https://caniuse.com/#search=flex
新しいIEだからといって油断しないで。
ちょいちょい予想外に崩れる。
従来の並べ方
今までは、floatを使って要素を並べることが多かったかと。
親::after (clearfixのやり方は各自好きなように)
clear: both;
content: '';
display: block;
子
float: left;
まぁ、悪くはない。
悪くはないけど、レイアウトが複雑になるにつれて構造もコードもぐちゃってくる。
例えば、
高さが可変のアイテムを横並びさせたときに発狂したくなる。
こういうのも、簡単にできちゃうんですよ
そう、flexboxならね。
flexboxの使い方
がちゃがちゃ書くのは他の記事に任せて、
本当にかいつまんで、いきます。
基本
display: flex;
これで、flexboxが使えるように！
以降、このコードは入ってるものとして進めていく。
左右中央寄せ
justify-content: center;
いじょっ！
これだけで左右中央寄せに！
上下中央寄せ
align-items: center;
いじょっ！
これだけで上下中央寄せに！
とまぁ、この辺りまではよくあるよねって話なのだが、もはやこの時点で素晴らしい。
cssが魅せたドラマに乾杯。
で、続くと、
一行に入りきらんくなったら回り込んでほしい
flex-wrap: wrap;
いじょっ！
これで入りきらんくなったら要素が回り込んでくれるように！
floatで横並んでると勝手になってくれるから、今までfloat使ってた人は勝手がちょっと違うかも。
縦に並べたい
flex-direction: column;
いじょっ！
これで縦に並ぶように！
並び順を指定したい
ここだけ、一旦基本のやつ忘れてください。
親子関係で書くゆえに。
親
display: flex;
子
order: 1;
いじょっ！
これでhtml内の記述と、表示される順番を変えられるように！
orderが1の要素から順に表示されることとなる。
使うまでは、
そんなことある？
って思ってたけど、まさかの使うタイミングが出てきて、使ったら便利すぎて泣きそうになった。
想定される使い方としては、レスポンシブサイトで
- PCでは横に三つ要素を並べたい
- SPでは縦に並べて、かつ横並びの時には中心にあった要素を一番上に並べたい
といった場合！
図にするとこんな感じ
レスポンシブやからこそ、使う機会が増えている、そんなものかなと。
古いブラウザ対応
まぁ、控えめに言っても無視。
とかできない場合は、今まで通りfloatとかを駆使していくしかねぇ、前しか向かねえ。
おわりに
html,css界隈はちょいちょい素晴らしいものができていってるイメージ。
object-fitとかも感動的やったなー。
便利なものは使っていきたい(古いブラウザにはメッセヨを放ちたい)
精神衛生には気をつけて、良きコーディングライフを！
さらばっ・ω・♪