Html flexbox/网格布局中最后一个边距/填充折叠

我有一个项目列表，我正试图用flexbox将其排列成可滚动的水平布局

容器中的每个项目都有左右边距，但最后一个项目的右边距正在折叠

有没有办法阻止这种情况发生，或者有一个好的解决办法

ul{
列表样式类型：无；
填充：0；
保证金：0；
显示器：flex；
高度：300px；
溢出：自动；
宽度：600px；
背景：橙色；
}
ulli{
背景：蓝色；
颜色：#fff；
填充：90px；
利润率：0.30px；
空白：nowrap；
弹性基础：自动；
}

项目1
项目2
项目3
项目4

查看解决方案。我删除了

空白

、

弹性基础

和

边距

，为您提供了纯flexbox解决方案

它依赖于

flex-flow:row

（水平）、

调整内容：周围的空间（您的边距）而不是更多！！
width
更改为
1200px
，因为90px的填充将框的总宽度设置为大于600px（在代码段中定义）


ul{
列表样式类型：无；
填充：0；
保证金：0；
显示器：flex；
柔性流：行；
证明内容：周围的空间；
高度：300px；
溢出：自动；
宽度：1200px；
背景：橙色；
}
ulli{
背景：蓝色；
颜色：#fff；
填充：90px；
}


项目1
项目2
项目3
项目4

你的问题不在于利润本身。它是滚动条，仅标注元素的可见内容

解决这个问题的一个方法是创建一个占据空白的可见元素

此解决方案在最后一个子项上使用伪


ul{
列表样式类型：无；
填充：0；
保证金：0；
显示器：flex；
高度：300px；
溢出：自动；
宽度：600px；
背景：橙色；
}
ulli{
背景：蓝色；
颜色：#fff；
填充：90px；
利润率：0.30px；
空白：nowrap；
弹性基础：自动；
位置：相对位置；
}
李：最后一个孩子：之后{
内容：“；
宽度：30px；
高度：1px；
位置：绝对位置；
左：100%；
顶部：0px；
}


项目1
项目2
项目3
项目4

潜在问题#1
最后一页边距没有缩小。它被忽略了

溢出
属性仅适用于内容。它不适用于填充或边距

以下是规范中的说明：


此属性指定块容器元素的内容
当它溢出元素的框时被剪裁

现在让我们来看看：


资料来源：

溢出
属性仅限于内容框区域。如果内容溢出其容器，则应用
overflow
。但是
溢出
不会进入填充或空白区域（当然，除非后面有更多内容）


潜在问题#2
潜在问题#1的问题在于，它似乎在flex或网格格式上下文之外崩溃。例如，在标准块布局中，最后一个边距似乎不会塌陷。因此，可能允许
溢出
覆盖边距/填充，而不管规范中怎么说


div{
高度：150像素；
溢出：自动；
宽度：600px；
背景：橙色；
空白：nowrap；
}
跨度{
背景：蓝色；
颜色：#fff；
填充：50px；
利润率：0.30px；
显示：内联块；
}

项目1
项目2
项目3
项目4
您可以在
div
容器上设置
宽度
和
溢出
，并在
ul
上设置
显示：内联flex
，而不是
flex
，这样弹性盒的大小将根据里面的项目计算，所有填充和边距都将毫无问题地应用


.container{
宽度：600px；
溢出：自动；
}
.集装箱ul{
列表样式：无；
填充：0；
保证金：0；
显示：内联flex；
背景：橙色；
}
李先生{
填充：60px；
利润率：0.30px；
空白：nowrap；
背景：蓝色；
颜色：#fff；
}


项目1
项目2
项目3
项目4

使用该解决方案，如果容器比列表项的组合宽度窄，那么边距将塌陷为0，因此不符合我的要求。我还需要能够指定每个项目的边距宽度。所以你不需要flexbox。你需要一个正常的布局。可以使用“显示内联块”或“浮动”以及空白来避免换行。但是这些要求与flexbox（柔性箱）无关，你不需要柔性箱，你需要一个固定的流体布局。我使用flexbox是因为我希望元素具有一致的高度。我还在更大的视口中换行到不同的行；滚动条仅适用于小屏幕。我读过的规范概述中提到了收拢上下页边距，但没有提到收拢左右页边距。第一个项目的左边距没有折叠，所以我认为最后一个项目的RHS是很奇怪的。我感谢你的帮助，这只是没有回答关于利润率崩溃的问题。别担心。每个人都知道自己的项目需要什么。我不知道你所有的要求。所以我祝你好运，但我删除了这个答案，因为它不是你想要的。这里的最后一个边距工作正常；）在您的代码中，我认为这是总宽度的问题，或者是元素的宽度的问题。每个元素的大小至少为200px，边距为60px，您有4个元素，父框的总宽度为600px。注意：如果在每个元素和