当它们包装时均匀分配flex项目

当我的flexbox容器具有多于一定数量的元素时，我希望它使用多行。这是我目前的解决方案：当它们包装时均匀分配flex项目

.container { 
 
    display: flex; 
 
    width: 400px; 
 
    background: black; 
 
    padding: 6px; 
 
    margin: 10px; 
 
    flex-wrap: wrap; 
 
} 
 
.box { 
 
    flex: 1 1 0; 
 
    height: 32px; 
 
    flex-grow: 1; 
 
    min-width: 15%; 
 
    border: solid 1px black; 
 
} 
 
.box:nth-child(even) { 
 
    background: blue; 
 
} 
 
.box:nth-child(odd) { 
 
    background: red; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

http://codepen.io/samkeddy/pen/mOwZBv?editors=1100

的问题是最后一排的物品被拉伸，以填补该行。

我想要的是它在行之间均匀分布元素，以便每个元素尽可能接近相同的大小。

例如，每行最多有6个元素。当你有8个元素时，它将6放在第一行，第二行放2。我希望它在每行上放4个。

这是可能与flexbox？这有可能以任何方式？

来源

2016-11-25 stackers

的可能的复制（http://stackoverflow.com/questions/22085646/can-flexbox-divide-items-evenly在多行） – Roberrrt

是的，听起来像那个人正在寻找同样的事情。 – stackers

您的问题引发了两个问题：（1）包装时将物品保持相同的尺寸;（2）在包装时均匀分配物品。问题（2）可以通过将'flex-wrap'移动到媒体查询中解决。问题（1）可以用不可见的尾随项解决：[** demo **]（http://codepen.io/anon/pen/eBRwae?editors=1100）。 –

我不得不最终做的是计算每行的数量（服务器端），然后用它来获得每个盒子的最小宽度，并将其应用于每个使用内联css的盒子。

来源

2017-06-29 13:00:59 stackers

实际上有这样的一个技巧：添加一个伪元素到容器，并给它一个flex-grow为50左右。这将创建一个假装元素来填充剩下的空间。请注意，我删除了border规则，因为它计算元素的宽度并与基于flex的冲突相冲突。

下面是修改的例子：？可均匀Flexbox的多行鸿沟项目] https://codepen.io/walidvb/pen/ZXvLYE

来源

2017-10-05 11:53:08 walidvb

当它们包装时均匀分配flex项目

回答

相关问题