How to stack 2 divs left and align last div right using Flex

puntable 0
Viewed 48

I want to stack 2 divs on top of each other aligned left and make the last div align right. They should all 3 be vertically centered.

This is the markup I have. This can't be changed.

<div class="wrapper">
    <div class="first">First</div>
    <div class="second">Second</div>
    <div class="third">Third</div>
</div>

This is how i want it to be.

enter image description here

Is this possible using Flex and not changing the markup?

flexbox css html
2 Answers

Here you go:

    .box{
  width:100px;
  height:100px;
  background-color:red;
  margin:5px;
}
.box:nth-of-type(3){
  align-self:end;
}
.con{
  display:flex;
  width:350px;
  height:250px;
  flex-wrap:wrap;
  flex-direction:column;
  align-items:center;
  justify-content:center;
background-color:yellow;
}
<div class="con">
  <div class="box">001</div>
  <div class="box">002</div>
  <div class="box">003</div>
</div>

HamiD0

If you can add wrapper divs to those three divs you could do it as following:

You can wrap your first two divs in another div and apply justify-content: space-between to the container. To center them vertically, add display: flex; and flex-direction: column to the wrapper class and add justify-content: center

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

.box {
  background-color: green;
  height: 100px;
  width: 100px;
  margin: 10px;
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<div class="container">
  <div class="col">
    <div class="box">First</div>
    <div class="box">Second</div>
  </div>
  <div class="col">
    <div class="box">Third</div>
  </div>
</div>

userHTBl10
Related