0
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 5 years have passed since last update.

space-betweenを使っても中央揃えにならないとき

Posted at

謎の余白

flexboxって凄い便利ですよね。
細かい数値なんかを指定しなくてもいい感じに
キレイに並べてくれる素晴らしいものでお使いの方も
多いのではないかと思うんですけど今回こんな風にズレてしまって
少し困ったのでメモとして解決策を残しておきます。
EJVshJAUYAAavPS.jpeg

空のclassを用意する。

いやもう本当にこれだけです。
どうも疑似要素::beforeを使用していたことが原因のようでした。
space-around等の別のもので指定しても謎の余白は消えなかったので
疑似要素とはあまり相性が良くないみたいですね。
当然ですが::afterでも結果は変わりませんでした。

そしてこちらが擬似要素ではなく空のクラスを用意したもの
EJVshJEUUAEvBcu.jpeg
右にあった謎の余白がキレイに消えてますね。
空のclassはできれば使いたくなかったんですけど
一応解決はしているのでしばらくはこれでいきたいと思います。

0
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
0
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?