Html 包裹时，弹性物品应向左对齐，而不是居中对齐

我在我的网站的移动菜单底部有一个基于flex的无序社交媒体图标列表

我试着让三排人并排坐着，等距离分开。我是按规定处理的

justify-content:space-around

但是我的问题是，当有三个以上的项目时，下一行开始从中间填充，而我希望它从左边填充，因为用户会随着时间的推移添加更多图标

我解释得越深入，我就越不确定这是否可能，但我想我会把它扔出去以防万一

是否可以使下一行中的列表项从容器的左侧开始，而不会弄乱

justify content:space around

规则

目前，只有当两排都有三个人时，他们才会排队

这是密码

.box{
宽度：275px；
高度：275px；
背景颜色：黄色；
}
ul{
宽度：自动；
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
柔性包装：包装；
填充：30px 20px 30px 20px；
列表样式：无；
}
李{
宽度：30px；
高度：30px；
利润率：15px；
背景色：红色；
}

一,
二,
三,
四,

删除li标签上的页边距

---

另外，不要忘记ul和li具有浏览器应用的默认样式。考虑使用A在所有浏览器之间具有一致性。

< P>不可能使用本机FracBox…或任何其他的布局方法。有一些变通办法，但没有这些……不是真的

然而，如果已知可能的额外剩余物品的数量（在本例中为2），则可以添加隐藏物品以平衡物品…见我所说的黑客行为

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.盒子{
宽度：275px；
高度：175px；
背景颜色：黄色；
}
保险商实验室{
宽度：自动；
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
柔性包装：包装；
填充：30px 20px 30px 20px；
列表样式：无；
}
李{
宽度：30px；
高度：30px；
利润率：15px；
背景色：红色；
}
.隐藏{
不透明度：0；
身高：0；
}

一,
二,
三,
四,
五,




一,
二,
三,
四,

解决方案 不要使用

justify content:space around

而使用

justify content:space-between

---

解释 请看flexbox规范：

justify content

属性沿主轴对齐弹性项 flex容器的当前行的

有五个值适用于

调整内容

。以下是其中两个：

周围的空格

弹性项目均匀分布在一行中，有一半大小的空间 在两端

如果剩余的可用空间为负值或 行中只有一个弹性项，此值与

中心

我的。这就是你的问题所在

现在检查

之间的空格

：

之间的空格

弹性项目在生产线上均匀分布

如果剩余可用空间为负数或行上只有一个弹性项，则该值与

flex start

因此，要在包裹上左对齐您的flex项目，请使用之间的空格

然后，如果需要，可以向容器添加一些左右填充，以模拟周围的

空间


当然，您将面临的下一个问题是，当两个项目包装时，每个项目都在相反的一端对齐。：-）
 嗯，谢谢，我没听说过。我将尝试将它添加到我的样式表中，因为我经常想知道为什么在我自己没有指定任何值的情况下，事情会有边距值等。至于li标记上的边距，当列表项超过三个时，我需要它们在行之间保留一些空间。从
li
标记中删除边距只会在框周围创建更多空间，这可能会占用第一行的第四个框。没别的了。谢谢Michael，我不知道是什么让我尝试使用周围的
空间，这是我第一次尝试。我以前使用过几次
之间的空格，但我甚至没有想到在这里尝试，因为出于某种原因，我认为它会有类似于
周围空格的效果。你的答案非常清楚，是我问题的完美解决方案：）嗨，保利，也许我误解了这些类似的问题，但我上面的答案似乎有效。我对最近这篇文章的回答可能也是一个解决办法。我并不是说它不能用hack完成，但它不是flexbox的原生版本。这是我的观点，但这也是我的观点。该行为在规范中定义。它不是黑客行为。