1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

結局display: flexって、何をどう使えばいいんだ?

Posted at

基本的な使い方

親要素(例えばdiv)に display: flexをつけるだけ。

 ベンダープレフィックスってつける必要あるの?

一部のバージョンが古いブラウザでは対応していなかったりベンダープレフィックスが必要になりますが、それらのシェアも実際はほとんど0に近いので、気にしなくていいでしょう。
【2020年最新】Flexboxの対応ブラウザとベンダープレフィックスまとめ


最新のIE 11でもいくつかバグが報告されている

ともありますが、IEを想定しないなら、結局のところベンダープレフィックスは付けなくても大丈夫そう。

プロパティって色々あるけどどれ使えばいいの?

・大抵、「ブロック要素を手軽に横並びにしたい」という時に使うと思うので、その場合は、 justify-content (アイテムの水平方向の位置を指定する)と align-items (アイテムの垂直方向の位置を指定する)くらいかな。

・縦並びにしたかったら、flex-direction: column で、並び順を逆にしたければ flex-direction: row-reverse とか(でも使う頻度は多くない?)

・折り返しを制御するflex-wrap (デフォルトはnowrap で折り返さない)もあるけど、BootStrapのGrid System(col-とか)使えば、必要ない?

align-content (アイテムの行の垂直方向の位置を指定する)は、行が複数になった時に使う、justify-content の縦版って感じかな(余白を埋めるか、どう割り振るか)。

参考

もう迷わない!CSS Flexboxの使い方を徹底解説

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?