Question

Flexbox justify-content: space-around使我的列表项水平均匀分布。有没有办法让完全相同的东西，唯一的区别是左边的第一个项目左边没有空格？（即列表＆＃34;从容器的左边缘开始＃34;

Answer 1

不使用justify-content: space-around，而是在项目上使用auto页边距。

通过提供每个弹性项margin-right: auto，容器空间将在项目之间均匀分布（如justify-content），但第一项将保留在左边界。

＆＃13;

flex-container[one] {
  display: flex;
  justify-content: space-around;
  border: 1px dashed green;
}

flex-container[one]>flex-item {
  background-color: lightgreen;
}

flex-container[two] {
  display: flex;
  border: 1px dashed red;
}

flex-container[two]>flex-item {
  margin-right: auto;
  background-color: orangered;
}

flex-item {
  width: 50px;
  height: 50px;
}

＆＃13;

<code>justify-content: space-around</code>
<flex-container one>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

<br>

<code>margin-right: auto</code>
<flex-container two>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

＆＃13;

jsFiddle demo

点击此处了解有关flex auto页边距的详情：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 2

您可以使用justify-content: space-between，但最后一个内容在右侧也没有空格。

好documentation。

Answer 3

＆＃13;

.container {
    display: flex;
    justify-content: space-evenly;
}
.container .item {
    margin: 0 auto 0 0;
}

＆＃13;

<div class="container">
    <div class="item">Apple</div>
    <div class="item">Orange</div>
    <div class="item">Pineapple</div>
</div>

＆＃13;

将auto用于margin-right项目将被强制使用＆＃34;离开了。

Answer 4

使用justify-content: space-between代替space-around来获取您在此处尝试实现的目标。

参考代码：

ul {
  display: flex;
  padding-left: 0;
}

li {
  justify-content: space-between;
  display: flex;
  width: 25%;
}

<ul>
  <li>Apple</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Pineapple</li>
</ul>

Answer 5

另一种方式：

使用css属性flex-grow: 1创建一个“ splitter”元素。
将CSS属性display: flex添加到包装器面板。
在需要的地方添加分离器

下面的简短示例中，分离器元素标记为红色

.main
{
  display: flex;
  
  border: 1px dashed black;
}

.element
{
  width: 50px;
  height: 50px;
  margin: 5px;
  border: 1px solid blue;
}

.splitter
{
  flex-grow: 1;
    
  border: 1px solid red;
  margin: 3px;
}

<div class="main">
  <div class="element">
  </div>
  <div class="element">
  </div>

  <div class="splitter">
  
  </div>

  <div class="element">
  </div>

  <div class="splitter">
  
  </div>
  
  <div class="element">
  </div>
  <div class="splitter">
    
  </div>
</div>

柔化物品均匀间隔但第一项对齐左侧

5 个答案:

jsFiddle demo