左对齐第一个flex项目以换行justify-content：space-around [英] left-align first flex item to wrap with 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规格：
 
 
   8.2。轴对齐： justify-content 属性  
 
 
 
  justify-content 属性沿弹性容器当前行的主轴
对齐弹性项目。
 
 
有五个值适用于 justify-content 。以下是其中两个：
 
 
    space- around    
 
 
 
 Flex项目均匀分布在该行中，两端有半角空格
。
 
 
 
 如果剩余的可用空间是负数或者有
行上只有一个flex项，这个值就等于
 中心。  
 
 
 
 
 
 
现在查看之间的空格：
 
 
   空格   
 
 
 
  如果剩余的可用空间是负数或有在线上只有一个flex项，此值与 flex-start 相同。  
 
 < blockquote> 
 
 
因此，要在wrap上左对齐您的flex项目，请使用空格。 （如果需要，您可以向容器添加一些左侧和右侧填充以模拟空格。）
 
 
 
 
 
 
当然，你将面临的下一个问题是两个项目包装，每个项目在两端对齐。 但这是另一个问题： - ）
 
I have a flex-based unordered list of social media icons at the bottom of a mobile menu on my website.

I'm trying to get rows of three to sit side by side, equal distance apart. I've managed this with the rule
justify-content:space-around
but my problem is that when there is more than three items, the next row starts filling up from the centre, whereas I'd like it to fill up from the left as the user adds more icons over time.

The further I get with explaining this the more unsure I am as to whether this is even possible, but I thought I'd throw it out there just in case.

Is it possible to make the list items in the next row start from the left of the container without messing up the justify-content:space-around rule?

At the moment they only line up when there is three in both rows.

Here's the code 



.box {
  width:275px;
  height:275px;
  background-color:yellow;
}

ul { 
  width:auto;
  display: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>



解决方案
Take a look at the flexbox spec:

  
8.2. Axis Alignment: the justify-content property
  
  
The justify-content property aligns flex items along the main axis
  of the current line of the flex container.
There are five values that apply to justify-content. Here are two of them:

  
space-around
  
  
Flex items are evenly distributed in the line, with half-size spaces
  on either end.
  
  
If the leftover free-space is negative or there is
  only a single flex item on the line, this value is identical to
  center.
Emphasis mine. That's the problem you're having.

Now check out space-between:

  
space-between
  
  
Flex items are evenly distributed in the line.
  
  
If the leftover free-space is negative or there is only a single flex item on the line, this value is identical to flex-start.
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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！