flexのおすすめポイント

HTML&CSS

2017.10.04

そろそろ今年のアドベントカレンダーに向けて動き出そうかと思っているyanagimachiです。
去年もバシャログでアドベントカレンダーをやろうと思っていたのですが、バックエンドエンジニアとフロントエンドエンジニア、デザイナーがみんな参加できるお題が考えつかずに断念してしまいました。どんなものがいいんでしょうね・・・(´-`)

さて、今回はflexをまだ始めていない人・始めて間もない人がflexをたくさん使いたくなるような、おすすめポイントを紹介していきたいと思います。

table-cellだと使えないアレが使えます！

marginが使えます

画像とテキストが横並びになるようなコンテンツで、間に隙間がある時がありますよね。
今まではtable-cellを使っていたので、marginではなくpaddingを使っていたと思いますが、flexだとmarginが使えます。CSSだけで対応できるデザインの幅が広がりますね！

中のコンテンツにposition: absoluteが使えます・・・と思ったら？

tableの中でposition: absoluteが使えない・・・と記憶していたのですが、試してみたらできました。古いバージョンのブラウザだけだったのでしょうか・・・
NEWマークやアイコンなどを出したいときにも便利です、と言いたかったのですが。
ただIE11だと多少ズレがあるようです。
tableのtdではflex同様に表示ができました。

デモ

高さ揃えができる

ナビやボタンの高さ揃えが楽々

部分的に２行のナビやボタン、今までかなり苦労してきたと思います。
table-cellだと中央ぞろえはできても高さが揃えられないので、高さ揃えのjsを使ったり、line-heightを部分的に変えたりして、a要素の高さを揃えたかと思います。
flexだと割と簡単にできちゃうので、作業の時短にもなります。