CSS Flexbox：如何在一行中排列三个项目，但其中两个彼此下方？

Question

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.

Answer 1

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>

Answer 2

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.