flexboxのspace-betweenが効かない時の備忘録

justify-content:space-betweenがうまく効かない時は

justify-contentはflexboxのコンテナの配分を定義するプロパティ。
私がよく使うのはspace-between。最初と最後のアイテムを端に寄せ、あとは均等に配分してくれるとてもいい子。
でもたまにうまく効かない時があったのでメモ。

See the Pen 180605_space-betweenのメモ by nekuta (@nekuta) on CodePen.

中の要素にmarginが入っていないか見る

 
flexboxを効かせた中の要素にmarginが入っていると当然ながらズレます。
space-betweenの他に均等に配置するspace-around、space-evenlyなどもずれます。
 

前後に:beforeや:afterが入っていないか見る

 
私がハマったのはこれ。display:flexを効かせた要素のafterに、消し忘れたclearfixが効いていました。
beforeやafterの擬似要素が入っているとズレの原因になりますので、入っていたら消しておいたほうがいいかもです。(擬似要素にabsoluteとか効いていたらズレない)
その他space-around、space-evenlyなどもずれます。