フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

背景色うねうねcss+javascript

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

はじめに

「display flex」
「flexbox 使い方」
もうこんな検索かけたら、えぐいぐらいの数の記事が引っかかるかと思います。
なので、よく書いてあることはだいぶざっくりめに進めていきます。

私はもともとwebのフロントエンドエンジニアだったのですが、現在はiOSエンジニアとして働いています。
そのため、webを書く機会は減っていたのですが、この間久々にしっかりしたwebサイトをコーディングする機会があり、
flex使ってみよー・ω・♪
って感じで使ってみたら案外というかすげぇいい感じだったので、記事にしようと決意の朝に。

flexboxって?

今まで面倒だったレイアウトたちの攻撃力をほぼ0にしてくれる、
(ドラゴンクエストライバルズでいうとアンルシアのような)
優秀なレイアウトの組み方。
比較的新しいものなので、古いブラウザに対応しないといけないあなたは・・・

みんな仲良しCan I use!
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とかも感動的やったなー。

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

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

さらばっ・ω・♪

[紹介元] CSSタグが付けられた新着記事 – Qiita 背景色うねうねcss+javascript

コメント

記事に戻る

コメントを残す