CSS flex最后一个不完整的行项目占用完整行项目的宽度 [英] CSS flex last incomplete row items take the width of complete row items

问题描述

我正在创建一个flexbox;一个容器有 max-width ，例如 max-width = 500px c> min-width：130px 和 flex-grow：1 填充整行空间。

I'm creating a flexbox; a container has a max-width, say max-width = 500px, and child items each has min-width: 130px and flex-grow: 1 to fill the the whole row space.

这里是小提琴： https://jsfiddle.net/7wroxkhj/6/

我想要实现的是，对于最后一行项目采用与前面项目相同的宽度。即：项目＃7和项目＃8具有从1到6的相同宽度的项目。

What I want to achieve is, for the last row items to take the same width of preceding items. i.e.: item #7 and item #8 to have the same width of items from 1 to 6.

如何实现？

UPDATE：

欢迎使用JS解决方案！

JS solutions are welcomed!

推荐答案

您可能想在列表末尾考虑不可见的flex项目。

You may want to consider something along the lines of invisible flex items at the end of the list.

HTML

<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child hidden">9</div>  /* new */
    <div class="child hidden">10</div> /* new */
</div>

CSS

.hidden {
    visibility: hidden;
    height: 0;
    font-size: 0;
    margin: 0 10px;
}

DEMO

这篇关于CSS flex最后一个不完整的行项目占用完整行项目的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！