Flex项目在包装时应该对齐左侧而不是中央 [英] Flex item should align left, not center, when it wraps

问题描述

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

我试图获得三排并排坐在一起，等距离分开。我已经用规则管理了这一点

  justify-content：space-around 
  

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

。

我解释得越多越好不确定我是否有可能这样做，但我想我会把它扔到那里以防万一。

是否有可能在下一行从容器的左边开始，而不会搞乱 justify-content：space-around 规则？

目前他们只在两行中有三个时排队。

这是代码

  .box {width：275px;高度：275px; background-color：yellow;} ul {width：auto;显示：弯曲;挠曲方向：行;证明内容：空间周围; flex-wrap：wrap; padding：30px 20px 30px 20px; list-style：none; } li {width：30px;高度：30PX;保证金：15px的;  < div class = 框 > < UL> <李→1< /锂> <李→2< /锂> <李→3< /锂> <李→4< /锂> < / div>< / div>  

解决方案

解决方案

而不是 justify-content：space-around 使用 justify-content：space-between 。

---

解释

查看flexbox spec：
$ b

8.2。轴对齐： justify-content 属性

justify-content 属性沿着Flex容器当前行的主轴
对齐flex项。

有五个值适用于 justify-content 。这里有两个：

空格

Flex项目均匀分布在行中，两端都有半角空格
。

如果剩余的空闲空间为负数或
只有一行上的单个弹性项目，则此值与
<$ c $相同c> center 。

Emphasis mine。这是您遇到的问题。

现在查看空间：

空格之间

弹性物品均匀分布在线上。

如果剩余空闲空间为负值或者只有一个这个值与 flex-start 相同。 b $ b

因此，要将您的flex项目左对齐，请使用 space-between 。

然后，如有必要，可以在容器中添加一些左右填充以模拟 space-around 。

---

当然，下一个你会遇到的问题是两个项目换行，并且每个项目在两端对齐。 但这完全是另一个问题 ： - ）

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>

解决方案

Solution

Instead of justify-content: space-around use justify-content: space-between.

---

Explanation

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.

Then, 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项目在包装时应该对齐左侧而不是中央的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！