Center one div and set one div to right inside a container

Question

So i have a container that is flex, and I want to add 2 more div inside it so 1 is centered and one is on the right edge. Can someone pls help. the container must be flex.

Answer 1

You can add an empty div inside of parent container at the beginning so you can then use justify-content: space-between on the parent container. Check the code below:

.parent {
  display: flex;
  border: 1px solid green;
  width: 100%;
  justify-content: space-between; /* Add this */
}

.child {
  border: 1px solid red;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="parent">
  <!-- Empty DIV for the sake of justify-content: space-between -->
  <div></div>
  <div class="child">CENTER</div>
  <div class="child">RIGHT</div>
</div>