Question

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

我试图将三排排成一排，相距相等的距离。我已使用规则

管理此操作

justify-content:space-around

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

我得到的解释越多，我就越不确定这是否可行，但我想我会把它扔出去以防万一。

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

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

这是代码

＆＃13;

.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;
}

＆＃13;

<div class="box">

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

</div>

＆＃13;

Answer 1

解决方案

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

说明

看一下flexbox规范：

8.2. Axis Alignment: the justify-content property

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

有五个适用于justify-content的值。以下是其中两个：

<强> space-around

Flex项目均匀分布在行中，具有半角空格   在任何一端。

如果剩余的自由空间为负数或存在   在该行上只有一个弹性项目，此值与之相同   center。

强调我的。这就是你遇到的问题。

现在查看space-between：


<强> space-between

Flex项目均匀分布在该行中。

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

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

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

当然，您将面临的下一个问题是当两个项目换行时，每个项目都会在相反的两端对齐。 But that's another question altogether： - ）

Answer 2

不能使用本机flexbox ...或任何其他布局方法。有解决方法，但没有那些......不是真的。

但是，如果已知可能的额外剩余项目的数量（在这种情况下为2），您可以添加隐藏的项目，甚至可以解决问题...看到我说这是hacky。< / p>

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.box {
  width: 275px;
  height: 175px;
  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;
}
.hidden {
  opacity: 0;
  height: 0;
}

＆＃13;

<div class="box">

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li class="hidden"></li>
    <li class="hidden"></li>
  </ul>

</div>

<div class="box">

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="hidden"></li>
    <li class="hidden"></li>
  </ul>

</div>

＆＃13;

Answer 3

删除li标签上的边距。

另外请不要忘记ul和li具有浏览器应用的默认样式。考虑使用css reset在所有浏览器中保持一致。

Flex项目在包裹时应该左对齐，而不是居中

3 个答案:

解决方案

说明