WordPressなどの動的に記事を読み込んだり、カード型のコンテンツを横並びにする際に便利な『display:flex』と『justify-content: space-between』を使ったTIPSです。
【CSS】display:flexとjustify-content: space-betweenで最後の要素だけ左寄せする方法
コンテンツを横並びのレイアウトにする際に『display:flex』と「justify-content: space-between」を指定すれば、コンテンツを包むコンテナ内で自動的に均等配置してくれるのでめっちゃ便利ですよね。
しかし、『justify-content: space-between』の「均等配置」という点がちょっと厄介でして、例えば横並びにコンテンツを3つ並べる想定で『display:flex』『justify-content: space-between』を指定していたとして、表示するコンテンツ数が5つの場合、2段目のコンテンツは2つしかありません。
すると、『justify-content: space-between』の均等配置だと以下のようになってしまいます↓
See the Pen justify-content No good by nkmr (@nkmr_whoo) on CodePen.
２段目の真ん中が空いてしまってカッコ悪いですね。
発注者サイドもこれは望んでないでしょう。
2段目の最後のコンテンツが左寄せになってくれれば見た目も自然ですっきりしますよね。
justify-content: space-between で均等寄せのまま一番最後のコンテンツだけ左寄せする方法
ではさっそく方法をご覧ください↓
See the Pen justify-content Good by nkmr (@nkmr_whoo) on CodePen.
.item の親要素である .container の :after疑似要素としてコンテンツ（.item）幅と同じ幅を設定することで、最後のコンテンツが左寄せになります。
要は、コンテンツの最後に透明な擬似要素を追加する、という感覚ですね。
スマホでコンテンツを縦並びにしたい場合
スマホ表示でコンテンツ（上記の例で言えば .item）を縦に並べたい場合のコードは以下のように、
.container {
display:block;
}
.item {
width: 100%;
}『display:flex』を『display:block;』にして flexを解除、.item のコンテンツ幅を横幅100%にすれば縦並びになります。
まとめ
こんな感じで justify-content: space-betweenで最後の要素だけ左寄せする方法 のご紹介を締めたいと思います。
他にも同じシチュエーションを解決する方法はあるのですが、対応ブラウザなどを鑑みると現時点ではこの方法がいいのかなぁと思いました。
時期が来て便利なプロパティが使えるようになったら別記事に書きたいと思います。
参考にさせていただきました↓
ありがとうございます！
