tips blog

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

2020年1月11日

【課題】

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

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

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

しかし、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を設定し完成。

応用で4列の場合

5列の場合

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です