How to align three columns, one is on left and the others on the right?

Question

I have three div elements. I want the first one on the left, and the other on the right side.

<div class="flex-container">
   <div class="first">1</div>
   <div>2</div>
   <div>3</div>  
</div>

I tried flex style

justify-content: flex-end;

and for the first one I wanted the first one float to the left

.flex-container .first {
  float: left;
}

But they all float to the right. Please see the demo.

codepen.io

GBra 4.669 · Accepted Answer · 2021-02-26T17:14:57.547

.flex-container .first {
  margin-right: auto;
}

margin-right: auto; will push it to the left, all the other elements will stay on the right. In general, keep in mind that Floats should not be used for layout. Float is meant to take an element, put it to one side, and let other contents flow around it. When you use Floats, you should use also clear.

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
  justify-content: flex-end;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.flex-container .first {
  margin-right: auto;
}

<div class="flex-container">
  <div class="first">1</div>
  <div>2</div>
  <div>3</div>  
 
</div>

How to align three columns, one is on left and the others on the right?

1 Answers1