Question

我在这里有一个简单的flex布局示例。

所有元素都在justify-content: flex-end;

的右侧

我需要第一个元素＆＃39; One＆＃39;离开。

我可以通过绝对定位来做到这一点，但有一种灵活的方式来做到这一点。

＆＃13;

.content{
  background: grey;
  color: white;
  font-family: sans-serif;
  padding: 10px 5px;
  display: flex;
  justify-content: flex-end;
}

.block{
  background: red;
  padding: 5px;
  margin-right: 5px;
}

.one{
  align-items: flex-start;
  background: blue;
  //left: 0;
  //position: absolute;
}

＆＃13;

<div class='content'>
  <div class='block one'>
    One
  </div>
  
  <div class='block two'>
    Two
  </div>
  
  <div class='block three'>
    Three
  </div>
  
  <div class='block four'>
    Four
  </div>
</div>

＆＃13;

Answer 1

{flex}容器上设置的align-items，而不是使用align-self的flex项，但它会影响横轴，垂直移动flex 行项。< / p>

由于灵活项目尚未使用justify-self: flex-start，您可以使用自动边距，因此如果您在第一个元素上添加margin-right: auto;，它将被推到左侧。< / p>

从技术上讲，您可以在第二项上设置margin-left: auto，但为了便于阅读，我建议将其设置在目标元素上。

Stack snippet

.content{
  background: grey;
  color: white;
  font-family: sans-serif;
  padding: 10px 5px;
  display: flex;
  justify-content: flex-end;
}

.block{
  background: red;
  padding: 5px;
  margin-right: 5px;
}

.one{
  margin-right: auto;
  background: blue;
}

<div class='content'>
  <div class='block one'>
    One
  </div>
  
  <div class='block two'>
    Two
  </div>
  
  <div class='block three'>
    Three
  </div>
  
  <div class='block four'>
    Four
  </div>
</div>

Answer 2

只需在第一个元素上添加margin-right:auto，如下所示：

.content{
  background: grey;
  color: white;
  font-family: sans-serif;
  padding: 10px 5px;
  display: flex;
  justify-content: flex-end;
}

.block{
  background: red;
  padding: 5px;
  margin-right: 5px;
}

.one{
  margin-right:auto;
  background: blue;
}

<div class='content'>
  <div class='block one'>
    One
  </div>
  
  <div class='block two'>
    Two
  </div>
  
  <div class='block three'>
    Three
  </div>
  
  <div class='block four'>
    Four
  </div>
</div>

Answer 3

我以前做过这种方式的一种方法是拥有一个填充空间的隐藏元素：

.content{
  background: grey;
  color: white;
  font-family: sans-serif;
  padding: 10px 5px;
  display: flex;
  justify-content: flex-end;
}

.block{
  background: red;
  padding: 5px;
  margin-right: 5px;
}

.one{
  align-items: flex-start;
  background: blue;
  //left: 0;
  //position: absolute;
}

.hidden { visibility: hidden; }
.flex-grow { flex-grow:1; flex-shrink:0; }

<div class='content'>
  <div class='block one'>
    One
  </div>

  <div class='hidden flex-grow'></div>
  
  <div class='block two'>
    Two
  </div>
  
  <div class='block three'>
    Three
  </div>
  
  <div class='block four'>
    Four
  </div>
</div>

CSS - Flex一个项目向左浮动

3 个答案: