How to place 2 items in a flex row 1 left justified and 1 right justified

Question

I have 2 graphic images that I want placed into a flex row. I want the first item to left justified and the second item to be right justified. This is the code I am running:

 <div class="flex-container">     
    <div class="flex-item-left">         
       <img src="images1.png">     
    </div>     
    <div class="flex-item">         
       <img src="images2.png">     
    </div>
 </div>

And this is the .css that I have:

 .flex-container {   
    display: flex;   
    align-items: center;   
    justify-content: center; 
  }
  .flex-item {  
   }
  .flex-item-left {   
     justify-items: flex-start;
   }

It was my understanding that justify-items: flex-start would pull the item with this class to the beginning of the flex container. In my case, this should pull image1.png to the left margin. However, both images get placed in the center of the flex box.

Any assistance is greatly appreciated.

Thanks!

place two containers that are full-column-width and adjust their contents appropriately. Or try CSS-Grid — Psi, Aug 05 '22 at 17:36

kumarhimself · Answer 1 · 2022-08-05T17:40:48.900

1

I ran your code and found out that you don't need to have the ".flex-item-left" class. Go into your ".flex-container" class and change the "justify-content: center" to "justify-content: space-between".

This is what your CSS should look like:

 .flex-container {
    display: flex;
    align-items: center;  
    justify-content: space-between;
  }

edited Aug 05 '22 at 17:40

answered Aug 05 '22 at 17:39

kumarhimself

70
1
10

Kameron · Answer 2 · 2022-08-05T17:44:55.410

You're looking for justify-content: space-between; on the flex parent.

.flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

<div class="flex-container">
  <div class="flex-item-left">
    <img src="https://dummyimage.com/200/000/fff">
  </div>
  <div class="flex-item">
    <img src="https://dummyimage.com/200/000/fff">
  </div>
</div>

Alternatively, you can use margin-right: auto; on :first-child with flex on the parent which will do the same thing. This will become useful when you start building more complex flex layouts.

W/ margin-right: auto; on first-child.

.flex-container {
  display: flex;
}

.flex-item:first-child {
  margin-right: auto;
}

<div class="flex-container">
  <div class="flex-item">
    <img src="https://dummyimage.com/200/000/fff">
  </div>
  <div class="flex-item">
    <img src="https://dummyimage.com/200/000/fff">
  </div>
</div>

score 0 · Answer 3 · answered Aug 05 '22 at 17:43

In this case you can simplify your layout quite a bit. You don't really need the .flex-item-left and .flex-item wrapping elements. You can simply use justify-content: space-between on the .flex-container div and you are good to go.

Some more explanation on justify-items: The justify-items attribute is meant to be set on the wrapping container and has the effect that all elements within that container get justify-self: center.

How to place 2 items in a flex row 1 left justified and 1 right justified

3 Answers3