Html CSS Flexbox换行第一行

我正在努力解决css flexbox的包装选项与项目之间的边距相结合的问题

我试图归档的是：启用包装的flexcontainer，以及一些具有可变宽度和最小宽度的项目。在这些项目之间，我希望有一个小的差距（保证金），但我不希望项目和容器之间的左边或右边的空白

现在我使用的是第一个子类和最后一个子类伪类，但不幸的是，当容器包装内容时，这种方法无法正常工作。请参阅以获取简约演示

HTML

---

有什么建议吗？

flexbox有一些特定的属性，因此在您的情况下，这就是需要解决的问题：

• 不要使用

  最小宽度

  使用

  弹性基础

• 使用

  justify content:space-between

• 要在项目上应用保证金，有一个特殊的技巧（查看 示例-修复边界一致性（应用包装器）

.container bg{
宽度：100%；
边框：1px纯绿色；
溢出：隐藏；
}
.集装箱{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
/*边框：1px纯红*/
利润率：0-20px；
}
.项目{
/*最小宽度：100px*/
flex:1 0 100px；/*如果要将100px设置为最小宽度，则必须将flex收缩设置为0*/
边框：1px纯黑；
利润率：0.20px；
}
/*.项目：第一个孩子{
左边距：0px；
}
.项目：最后一个孩子{
右边距：0px；
}*/

调整窗口大小以进行包装

A.
B
C
D
E

flexbox有一些特定属性，因此在您的情况下，这是需要修复的：

• 不要使用

  最小宽度

  使用

  弹性基础

• 使用

  justify content:space-between

• 要在项目上应用保证金，有一个特殊的技巧（查看 示例-修复边界一致性（应用包装器）

.container bg{
宽度：100%；
边框：1px纯绿色；
溢出：隐藏；
}
.集装箱{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
/*边框：1px纯红*/
利润率：0-20px；
}
.项目{
/*最小宽度：100px*/
flex:1 0 100px；/*如果要将100px设置为最小宽度，则必须将flex收缩设置为0*/
边框：1px纯黑；
利润率：0.20px；
}
/*.项目：第一个孩子{
左边距：0px；
}
.项目：最后一个孩子{
右边距：0px；
}*/

调整窗口大小以进行包装

A.
B
C
D
E

如果您在项目周围添加了另一个包装，您可以使用以下脏方法：

您将主容器设置为宽度的100%，然后将“子”容器设置为100%，再加上要添加的间距。然后将相同数量的

右边距

添加到项目中

.main容器{
宽度：100%；
边框：1px纯红；
}
.集装箱{
显示器：flex；
柔性流：行换行；
证明内容：之间的空间；
对齐内容：之间的空间；
宽度：计算（100%+5px）；
}
.项目{
最小宽度：100px；
弹性：1；
边框：1px纯黑；
右边距：5px；
}

调整窗口大小以进行包装

A.
B
C
D
E

如果您在项目周围添加了另一个包装，您可以使用以下脏方法：

您将主容器设置为宽度的100%，然后将“子”容器设置为100%，再加上要添加的间距。然后将相同数量的

右边距

添加到项目中

.main容器{
宽度：100%；
边框：1px纯红；
}
.集装箱{
显示器：flex；
柔性流：行换行；
证明内容：之间的空间；
对齐内容：之间的空间；
宽度：计算（100%+5px）；
}
.项目{
最小宽度：100px；
弹性：1；
边框：1px纯黑；
右边距：5px；
}

调整窗口大小以进行包装

A.
B
C
D
E

已更新，超过5项

使用

calc

和

jusify内容：之间的空格


*{
框大小：边框框；
保证金：0；
}
.集装箱{
边框：薄而实的红色；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
利润率：0-10px；
}
.项目{
边框：薄而实的黑色；
-webkit flex:1计算（20%-20px）；
弹性：1计算（20%-20px）；
利润率：0.10px；
填充：20px；
位置：相对位置；
}

A.
B
C
D
E
已更新，超过5项

使用
calc
和
jusify内容：之间的空格


*{
框大小：边框框；
保证金：0；
}
.集装箱{
边框：薄而实的红色；
显示：-webkit flex；
显示器：flex；
-webkit柔性包装：包装；
柔性包装：包装；
利润率：0-10px；
}
.项目{
边框：薄而实的黑色；
-webkit flex:1计算（20%-20px）；
弹性：1计算（20%-20px）；
利润率：0.10px；
填充：20px；
位置：相对位置；
}

A.
B
C
D
E
似乎是一种非常简单的方法。只有一个问题：由于额外的空间，容器上的负边距会导致滚动条。我该如何应对？查看更新的Fiddle刚刚发现自己：apply overflow:hidden to the wrapper——这似乎是一种非常简单的方法。只有一个问题：由于额外的空间，容器上的负边距会导致滚动条。我该如何应对？请参阅更新的Fiddle刚刚发现我自己：apply overflow:hidden to the wrapper-我假设只有在隐式包含五个项时，这才有效？第一个解决方案。。是的。更新了5个以上项目的示例。如果每行少于5个项目，则项目会增加。如果您想保持固定宽度，只需更改为“flex:0计算（20%-20px）；”我假设只有当你隐式地有五项时，这才有效？fir
<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid red;
}
.item {
    min-width: 100px;
    flex: 1;
    border: 1px solid black;
    margin-left: 20px;
    margin-right: 20px;
}
.item:first-child {
    margin-left: 0px;
}
.item:last-child {
    margin-right: 0px;
}