html - CSS - Flex 一项向左浮动

Question

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

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

我需要保留第一个元素“One”。

我可以用绝对定位来做到这一点，但有没有灵活的方法来做到这一点。

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

<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 1

align-items 设置在 flex 容器上，而不是 flex item，它使用 align-self，它仍然影响交叉轴，移动一个 flex 垂直排列元素。

因为还没有justify-self: flex-start 用于 flex 元素，你可以使用自动边距，所以如果你添加margin-right: auto; 在第一个元素上它会被推到左边。

从技术上讲，您可以在第二项上设置 margin-left: 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>