[CSS] display:flexで最後の行だけにスタイルを反映させる

【課題】

display:flexで最後の行だけにスタイルを反映させたい。

例えば、display:flexで3列で最後の行だけ線を消したい場合反映させるとき、9個なら

ul{
  display:flex;
  flex:wrap;
}
ul li{
  width:33.3333%;
  border-bottom:1px solid #000;
}
ul li:nth-last-child(1),
ul li:nth-last-child(2),
ul li:nth-last-child(3){
  border-bottom:none;
}

で最後の行だけ線を消すことができる。

しかし、7個や8個などコンテンツがある場合、

最後の行には1個もしくは2個しか表示されないため、2行目のものまで消えてしまう。

そうならなようにするための処理を行う。

【結果】

nht-last-childとnth-childの組合せでうまくいった。
線を消す部分だけ以下のように変更
———————
ul li:nth-last-child(1),
ul li:nth-last-child(2):nth-child(3n+1),
ul li:nth-last-child(2):nth-child(3n+2),
ul li:nth-last-child(3):nth-child(3n+1){
border-bottom:none;
}
———————

【説明】

display:flexで3列例レイアウトを組む場合、

最後の行に表示される個数

パターンで考えると以下の3パターン存在する。

———————————————

■最後から1個目が、列の左側。線は消さない

■最後から2個目が、列の真中。線は消す

■最後から3個目が、列の左側。線は消す

[6][3][4]

[3][2][1]

———————————————

■最後から1個目が、列の左側。線は消す

■最後から2個目が、列の左側。線は消す

■最後から3個目が、列の右側。線は消さない

[5][4][3]

[2][1]

——————————————–

■最後から1個目が、列の左側。線は消す

■最後から2個目が、列の右側。線は消さない

■最後から3個目が、列の真中。線は消さない

[4][3][2]
[1]
———————————————

これらの線を消すパターンのみ書き出す
———————————————
■最後から1個目は、全て線を消す

■最後から2個目が、列の左側。線は消す

■最後から2個目が、列の真中。線は消す

■最後から3個目が、列の左側。線は消す

———————————————

線を消すパターンをCSSで考える
———————————————
ul li[最後から1番目]
ul li[最後から2番目][列の左側の場合]
ul li[最後から2番目][列の真中の場合]
ul li[最後から3番目][列の左側の場合]
———————————————

[最後から1番目] = :nth-last-child(1)
[最後から2番目] = :nth-last-child(2)
[最後から3番目] = :nth-last-child(3)
[列の左側の場合] = :nth-child(3n+1)
[列の真中の場合] = :nth-child(3n+2)
[列の右側の場合] = :nth-child(3n)
※nth-child,nth-last-child参考
https://spyweb.media/2017/10/18/css-nth-child-awesome-technique/

CSS化
—————————————-
ul li:nth-last-child(1)
ul li:nth-last-child(2):nth-child(3n+1)
ul li:nth-last-child(2):nth-child(3n+2)
ul li:nth-last-child(3):nth-child(3n+1)
—————————————-
となる。

これらに線を消すstyleを設定し完成。

ul li:nth-last-child(1),
ul li:nth-last-child(2):nth-child(3n+1),
ul li:nth-last-child(2):nth-child(3n+2),
ul li:nth-last-child(3):nth-child(3n+1){
  border-bottom:none;
}

応用で4列の場合

ul li:nth-last-child(1),
ul li:nth-last-child(2):nth-child(4n+1),
ul li:nth-last-child(2):nth-child(4n+2),
ul li:nth-last-child(2):nth-child(4n+3),
ul li:nth-last-child(3):nth-child(4n+1),
ul li:nth-last-child(3):nth-child(4n+2),
ul li:nth-last-child(4):nth-child(4n+1){
  border-bottom:none;
}

5列の場合

ul li:nth-last-child(1),
ul li:nth-last-child(2):nth-child(5n+1),
ul li:nth-last-child(2):nth-child(5n+2),
ul li:nth-last-child(2):nth-child(5n+3),
ul li:nth-last-child(2):nth-child(5n+4),
ul li:nth-last-child(3):nth-child(5n+1),
ul li:nth-last-child(3):nth-child(5n+2),
ul li:nth-last-child(3):nth-child(5n+3),
ul li:nth-last-child(4):nth-child(5n+1),
ul li:nth-last-child(4):nth-child(5n+2),
ul li:nth-last-child(5):nth-child(5n+1){
  border-bottom:none;
}

—————————————-