html - CSS - Flex one item floated left

Question

I have a simple example of the flex layout here.

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

I need the first element 'One' to be left.

I can do this with absolute positioning but is there a flex way to do this.

.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

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.

Since there is no justify-self: flex-start to be used on flex items (yet), you can use auto margins, so if you add margin-right: auto; on the first element it will be pushed to the left.

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

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