Mr_Green Mr_Green - 5 months ago 15
CSS Question

Align items using flex

I have a requirement as shown below:

|[] [][]|


One element at left side of the viewport and two elements on right side of the viewport. To learn
display: flex
, I am trying this layout without wrapping the elements.

Is this layout possible with flexbox?

Here is the HTML:

<div class="parent">
<div class="child child--left"></div>
<div class="child child--right"></div>
<div class="child child--right"></div>
</div>


I tried using
align-items
and
align-self
but no use. Please help.

CSS:

.parent{
display: flex; // flexbox
}

Answer

You can use margin-left:auto in the div you need in the right side:

.parent {
  display: flex;
  height: 100px;
  width: 100%;
}

.child {
  flex: 0 0 20px;
  border: solid 1px green;
}

.child--right {
  margin-left: auto;
}
<div class="parent">
  <div class="child"></div>
  <div class="child child--right"></div>
  <div class="child"></div>
</div>