CSS - 向左浮动一个项目 [英] CSS - Flex one item floated left

问题描述

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

I have a simple example of the flex layout here.

我需要留下第一个元素'One'。

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

All the elements are on the right with justify-content: flex-end;

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

The align-items is set on flex container, not flex item, which use align-self, still, it affect the cross axis, moving a flex row item vertically.

推荐答案

技术上，你可以设置 margin-left：auto 在第二项上，尽管为了可读性，我建议将它设置在目标元素上。

Technically, you could set margin-left: auto on the 2nd item, though for readability I recommend to set it on the targeted element.

Stack snippet

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>

这篇关于CSS - 向左浮动一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！