左对齐第一个flex项目以换行justify-content：space-around

本文介绍了左对齐第一个flex项目以换行justify-content：space-around的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我在我的网站上的移动菜单底部有一个基于弹性的无序社交媒体图标列表。 我试图获取三行并排放置，等距离分开。我已经管理这个规则 justify-content：space- around 但是我的问题是，当有三个以上的项目时，下一行开始从中心填满， d喜欢从左边填充 ，因为用户会随着时间的推移添加更多图标。 不确定我是否这是可能的，但我认为我会把它扔在那里，以防万一。 可以使列表项在下一行从容器的左边开始，而不会弄乱 justify-content：space-around 规则？ 这里是代码 .box {width：275px; height：275px; background-color：yellow;} ul {width：auto;显示：flex; flex-direction：row; justify-content：space-around; flex-wrap：wrap; padding：30px 20px 30px 20px; list-style：none; } li {width：30px; height：30px; margin：15px; background-color：red;} < div class = box> < ul> < li> 1< / li> < li> 2< / li> < li> 3< / li> < li> 4< / li> < / ul>< / div> 解决方案查看flexbox规格：有五个值适用于 justify-content 。以下是其中两个： 现在查看之间的空格：There are five values that apply to justify-content. Here are two of them:Emphasis mine. That's the problem you're having.Now check out space-between:So, to left-align your flex item on wrap, use space-between. (If necessary, you can add some left and right padding to the container to simulate space-around.)Of course, the next problem you'll face is when two items wrap, and each item aligns at opposite ends. But that's another question altogether :-) 这篇关于左对齐第一个flex项目以换行justify-content：space-around的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！