CSS Selector for Last Row Items in Flexbox Wrap
"To select the last row of flex items in CSS, you can use the :nth-last-child selector along with :nth-child selector in combination.\n\nHere's an example:\n\nHTML:\nhtml\n<div class="flex-container">\n <div class="flex-item">1</div>\n <div class="flex-item">2</div>\n <div class="flex-item">3</div>\n <div class="flex-item">4</div>\n <div class="flex-item">5</div>\n <div class="flex-item">6</div>\n</div>\n\n\nCSS:\ncss\n.flex-container {\n display: flex;\n flex-wrap: wrap;\n}\n\n.flex-item {\n flex-basis: 33.33%;\n box-sizing: border-box;\n border: 1px solid black;\n}\n\n.flex-container :nth-last-child(-n+3):nth-child(3n+1),\n.flex-container :nth-last-child(-n+3):nth-child(3n+2),\n.flex-container :nth-last-child(-n+3):nth-child(3n+3) {\n background-color: yellow;\n}\n\n\nIn this example, the .flex-container is the flex container and .flex-item is the flex item. The flex-wrap property is set to wrap to allow the items to wrap onto multiple lines.\n\nThe selector .flex-container :nth-last-child(-n+3):nth-child(3n+1), .flex-container :nth-last-child(-n+3):nth-child(3n+2), .flex-container :nth-last-child(-n+3):nth-child(3n+3) is used to select the last row items. The nth-last-child(-n+3) selects the last three items, and the nth-child(3n+1), nth-child(3n+2), nth-child(3n+3) selects every 3rd item starting from the 1st, 2nd, and 3rd child respectively in the last row.\n\nIn this example, the background color of the last row items is set to yellow, but you can modify the style as per your requirement.\n
原文地址: https://www.cveoy.top/t/topic/qaNt 著作权归作者所有。请勿转载和采集!