css3 flexレイアウト justify-content:space-between 最後の行は左揃えになります

justify-content:space-betweenレイアウトを使用する場合、要素の最後の行にjustify-self: start;を使用しても効果がありません。調べたところ、CSS3 flexbox はまだサポートされていないことがわかりました。

では、最後の行を左揃えにするにはどうすればよいでしょうか?

いくつかの既存のソリューション

• タグ要素を使用して不足している項目を補完する
• グリッドの使用
• 擬似クラスの使用

疑似クラスの場合、最後の要素がいっぱいになるとプレースホルダーが存在し、グリッドに互換性の問題が発生し、新しいタグを追加したくなくなります。

固定数の列で各行を左揃えにする

列の数は固定されているため、最後の要素のmargin-right値を計算して、完全な左揃えを確保できます。

各行に要素の列が 3 つしかないと仮定すると、最後の要素が 2 番目の列にある場合にのみmargin-right処理が必要になり (つまり、 li:last-child:nth-child(3n + 2) )、距離は 1 つの要素の幅 + ギャップ幅になります。

要素の幅が$widthであると仮定すると、上記の状況に必要な距離は次のようになります: (100% - 3 * $width) / 2 + $width => (100% - $width) / 2

.list1 li:最後の子:n番目の子(3n + 2) {
  右マージン: calc((100% - $width) / 2);
} 

同様に、1 行 4 列の場合、最後の要素が 2 列目にある場合と、最後の要素が 3 列目にある場合の 2 つのケースを処理する必要があります。

.list2 li:最後の子:n番目の子(4n + 2) {
  右マージン: calc((100% - $width) / 3 * 2);
}
.list2 li:最後の子:n番目の子(4n + 3) {
  右マージン: calc((100% - $width) / 3 * 1);
} 

デモコードを見るにはここをクリックしてください

列数が固定されていない各行の左揃え

最善の解決策はグリッドを使用することだと思います。インターネット上にはグリッドがたくさんあるので、ここでは説明しません。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。