JohnDizzle JohnDizzle - 1 year ago 84
CSS Question

How to display child div on the end of parent flex row div and another two divs on the start of parent div?

How is it possible to display two div containers on the start of a row flex parent and the third one at the end? child-3 should be on the right side in the example below.

Here is a quick sample with all cildren on the start of the parent: jsfiddle



.parent {
height: 50px;
width: 100%;
border: 1px solid red;
display: flex;
flex-direction: row;
}

.child-1,
.child-2,
.child-3 {
margin: 2px 1px;
padding: 2px;
border: 1px solid blue;
}

.child-1 {}

.child-2 {}

.child-3 {}

<div class="parent">
<div class="child-1">
child-1
</div>
<div class="child-2">
child-2
</div>
<div class="child-3">
child-3
</div>
</div>




Answer Source

Wrap the first two elements in a div and the third one in a different div.

Give parent div justify-content: space-between.

Do the same with the new wrapping divs. (Make sure they are also display: flex;)

Check fiddle https://jsfiddle.net/jt6p4a30/2/

Your html should be

<div class="parent">
  <div class="subparent">
  <div class="child-1">
    child-1
  </div>
  <div class="child-2">
    child-2
  </div>
  </div>
  <div class="subparent">
  <div class="child-3">
    child-3
  </div>
  </div>
</div>

and CSS:

.parent {
  height: 50px;
  width: 100%;
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.subparent {
  display: flex;
  justify-content: space-between;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download