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