CSSのflexboxでjustify-contentのspace-betweenが効かない理由

justify-content: space-betweenとは

CSSのdisplay: flexでjustify-content: space-betweenを使用すれば要素を均等に配置することができる。

floatと違って右端の要素にmargin-right: 0を付ける必要がなく、clearfixも必要もないため最近は多くのサイトで使用されている。

たまに左端か右端(あるいはその両端)に不要な余白が追加されているサイトを見かける。

このようなケースは3つの原因が考えられる。

justify-content: space-betweenが指定されていても要素にmargin-rightなどが指定されている場合は位置がずれるため余白が発生する。

要素にmargin: 0 !importantを追加して余白がなくなるようであればこれが原因。

space-around均等に配置する値だがspace-betweenと違って左端と右端にも余白を均等に追加してしまう。

CSSのflexboxに使い慣れていないと間違えてこちらを指定してしまうことがある。

::beforeや::afterでcontent: ""が追加されるとその分の余白が追加されてしまう。

元々floatを使用していたがflexboxに変更してclearfixの::beforeや::afterを残してしまっていたなどのケースがよくある。