CODEWITHSUNDEEP
htmlcssflexbox
Dave
Dave

Reputation: 201

CSS Flexbox: How to arrange three Items in a Row, but two of them below each other?

Assumed we have this simple CSS flexbox layout:

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    }

.flex-item:nth-child(1) {
    order: 0;
    }

.flex-item:nth-child(2) {
    order: 1;
    align-self: flex-start;
    }

.flex-item:nth-child(3) {
    order: 1;
    align-self: flex-end;
    }

.flex-item {
    width: 50px;
    height: 50px;
    background:red;
}
<div class="flex-container">
   <div class="flex-item"></div>
   <div class="flex-item"></div>
   <div class="flex-item"></div>
</div>

Description of the issue:

Unfortunately flex-item 2 and 3 are not located at the right edge below each other, although they are both set to order: 1.

Question:

How can I arrange flex-item 2 to be at the upper right edge, while flex-item 3 is located at the lower right edge (item 1 should remain vertically centered at left edge)?

I did not yet figure out on how to arrange all three items in a row, but the latter two items below each other within this row.

Upvotes: 0

Views: 1561

Answers (2)

Ali Barış Zengin
Ali Barış Zengin

Reputation: 286

I guess you are trying to do that.

* {
  padding: 0;
  margin: 0;
}
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
}
.flex-container-col {
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
}

.flex-item:nth-child(1) {
    order: 0;
    align-self: flex-center;
    }

.box {
    width: 50px;
    height: 50px;
    background:red;
}
<div class="flex-container">
  <div class="flex-item box"></div>
  <div class="flex-item flex-container-col">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

If you want to both item 2 and 3 top of the right edge together, you can delete justify-content in flex-container-col so they will unite at the top. Hope works.

Upvotes: 1

Parvat R
Parvat R

Reputation: 846

If you want a block to be at up right, one at the center and other at the bottom right, then you can use this snippet. The flex item 1 should be at flex-start, the flex item 3 should be at the flex end and the flex item 2 should be where it is.

* {
  padding: 0;
  margin: 0;
}
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    }

.flex-item:nth-child(1) {
    order: 0;
    align-self: flex-start;
    }

.flex-item:nth-child(2) {
    order: 1;
    }

.flex-item:nth-child(3) {
    order: 1;
    align-self: flex-end;
    }

.flex-item {
    width: 50px;
    height: 50px;
    background:red;
}
<div class="flex-container">
   <div class="flex-item"></div>
   <div class="flex-item"></div>
   <div class="flex-item"></div>
</div>

Upvotes: 1

Related Questions