上次保证金/填充折叠在flexbox中

我有一个项目列表，我试图安排到一个带有flexbox的可滚动水平布局。

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

有没有办法阻止这种情况发生，还是一个很好的解决方法？

问题的Codepen： http ://codepen.io/anon/pen/WxmdpN

ul { list-style-type: none; padding: 0; margin: 0; display: flex; height: 300px; overflow: auto; width: 600px; background: orange; } ul li { background: blue; color: #fff; padding: 90px; margin: 0 30px; white-space: nowrap; flex-basis: auto; } 

 <div class"container"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> 

Answer 1

这似乎是所有主要浏览器的默认行为：在testing中，右边距在Firefox，Chrome，Safari，IE11和Edge中崩溃。

没有进行大量的实验，我会build议这个行为在spec中定义：

10.3.3正常stream程中的块级非replace元素

其他属性的使用值中必须包含以下约束条件：

margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right =包含区块的宽度

如果width不是auto并且border-left-width + padding-left + width + padding-right + border-right-width （加上任何不是auto的margin-left或margin-right ）的宽度大于那么对于下面的规则，所有的margin-left或margin-right auto值都被视为零。

如果以上所有的都有一个非auto的计算值，则这些值被认为是“过度约束的”，并且其中一个使用的值必须与其计算的值不同。 如果包含块的direction属性的值为ltr ，则忽略margin-right的指定值，并计算该值以使相等为真。 如果direction的值是rtl ，则发生这种情况

（强调加）

所以，根据CSS可视化格式模型 ，你的包含块可能会“过度约束”，结果是右边距被丢弃。

一个解决scheme是给你的最后一个元素添加一个正确的边界：

 li:last-child { border-right: 30px solid orange; } 

 ul { list-style-type: none; padding: 0; margin: 0; display: flex; height: 300px; overflow: auto; width: 600px; background: orange; } ul li { background: blue; color: #fff; padding: 90px; margin: 0 30px; white-space: nowrap; flex-basis: auto; } li:last-child { border-right: 30px solid orange; } 

 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> 

Answer 2

你的问题本身不是保证金。 这是滚动条的尺寸只有元素的可见内容。

解决这个问题的一个方法就是创build一个占用边界的可见元素

这个解决scheme使用最后一个孩子的伪处理

 ul { list-style-type: none; padding: 0; margin: 0; display: flex; height: 300px; overflow: auto; width: 600px; background: orange; } ul li { background: blue; color: #fff; padding: 90px; margin: 0 30px; white-space: nowrap; flex-basis: auto; position: relative; } li:last-child:after { content: ""; width: 30px; height: 1px; position: absolute; left: 100%; top: 0px; } 

 <div class"container"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div> 

Answer 3

看到解决scheme。 我删除了white-space ， flex-basis和margin ，为您提供一个纯粹的flexbox解决scheme。

它在flex-flow: row （horizo​​ntal）， justify-content: space-around （ margin ），不再有！ 由于90px的填充将框的总宽度设置为大于600px（在代码段中定义），因此width将更改为1200px 。

 ul { list-style-type: none; padding: 0; margin: 0; display: flex; flex-flow: row ; justify-content: space-around; height: 300px; overflow: auto; width: 1200px; background: orange; } ul li { background: blue; color: #fff; padding: 90px; } 

 <div class"container"> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> </div>