クリエイター:コーディング備忘録ブログ

コーディング

Flexboxのjustify-contentでの左寄せ

Flexboxのjustify-contentではflex内のアイテムの配置の仕方を指定することが可能です。

justify-contentにcenterと指定すると中央寄せ、
space-betweenと指定すれば親要素の幅を基準に、flexアイテムを均等に配置することができます、
また、space-aroundと指定するとすべてのflexアイテムを均等に配置できます。

3カラムでspace-betweenで配置した場合、最後の行のアイテムが二個だった場合、左右に配置され、表示がおかしくなります。

そんな3カラムでの対応策は、
afterなどの、擬似要素を利用して空のflexアイテムを生成しておくことで、他の数でも左寄せに表示することが可能です。

コメント

この記事へのコメントはありません。

RELATED

PAGE TOP