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在所有浏览器之间具有一致性。

删除Li标签<>强> > /P>的<强>边距。

---

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

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

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

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

一,
二,
三,
四,
五,




一,
二,
三,
四,

本机flexbox…或任何其他布局方法都无法实现。有一些变通办法，但没有这些……不是真的

然而，如果已知可能的额外剩余物品的数量（在本例中为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项目，请使用之间的空格

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

空间


当然，您将面临的下一个问题是，当两个项目包装时，每个项目都在相反的一端对齐。：-）
 解决方案
不要使用
justify content:space around
而使用
justify content:space-between


解释
请看flexbox规范：


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

有五个值适用于
调整内容
。以下是其中两个：

周围的空格

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

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