Flex 项目在环绕时应向左对齐，而不是居中对齐 [英] Flex item should align left, not center, when it wraps

问题描述

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

我试图让三排并排坐着，等距.我已经用规则管理了这个

justify-content:space-around

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

我解释得越深入，我就越不确定这是否可行，但我想我还是把它扔掉以防万一.

是否可以让下一行的列表项从容器的左侧开始，而不会弄乱justify-content:space-around规则?

目前他们只在两排都有三个的时候排队.

这是代码

.box {宽度:275px；高度:275px；背景颜色:黄色；}ul{宽度:自动；显示:弹性；弹性方向:行；justify-content:space-around;flex-wrap: 包裹;填充:30px 20px 30px 20px；列表样式:无；}李{宽度:30px；高度:30px；边距:15px；背景颜色:红色；}

<ul><li>1</li><li>2</li><li>3</li><li>4</li>

解决方案

解决方案

使用 justify-content: space-between 代替 justify-content: space-around.

<小时>

说明

看看 flexbox 规范:

<块引用>

8.2.轴对齐:justify-content 属性

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

有五个值适用于 justify-content.这里有两个:

<块引用>

空格

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

如果剩余的可用空间为负数或有线上只有一个 flex 项目，这个值等同于中心.

强调我的.这就是您遇到的问题.

现在检查space-between:

<块引用>

空格

Flex 项目在行中均匀分布.

如果剩余的可用空间为负数或行上只有一个 flex 项，则此值与 flex-start 相同.

因此，要在换行时左对齐您的 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屋！