时间戳

首页 > 解决方案 > 使用 flex-wrap 移动到下一行时保持 div 宽度的 Flex 盒设计

html - 使用 flex-wrap 移动到下一行时保持 div 宽度的 Flex 盒设计

问题描述

我有这个演示代码5，其中,的宽度6与7上面的 div 不同。

一种简单的方法是添加隐藏的空 div。但是，有没有更好的方法？

.parent-wrapper {
    height:100%;
    width: 400px;
    border: 1px solid black;
}
.parent {
    display: flex;
    flex-wrap:wrap;
}
.child {
    background:blue;
    flex: 1 0 21%;
    height:100px;
    margin: 5px;
}

<body>
    <div class="parent-wrapper">
        <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>
    </div>
</body>

最后，我想使用一些动态值来渲染它，所以我认为 CSS 方式会比添加空 div 更好

标签： htmlcsssassflexboxless

解决方案

不要求它成长怎么样，演示在这里

.child {
    background:blue;
    flex: 0 0 21%; //<-- note 0 here
    height:100px;
    margin: 5px;
}

推荐阅读