Posted at

flexboxを用途ごとにはいぱーざっくり理解する

どうも、はぐっです・ω・♪


はじめに

「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とかも感動的やったなー。

便利なものは使っていきたい(古いブラウザにはメッセヨを放ちたい)

精神衛生には気をつけて、良きコーディングライフを!

さらばっ・ω・♪