Align divs unten rechts über einander

Question

Wie kann ich unten viele divs aufeinander ausrichten. Wie auf einem Bild unten.

Answer 1

können Sie Flexbox verwenden diese

1. Set flex-direction: column auf Position eins zu tun, auf einer anderen divs
2. align-items: flex-end divs auf die rechte Seite der Eltern zu bewegen
3. justify-content: flex-end zu bewegen divs nach unten des übergeordneten Elements.

.parent { 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-end; 
 
    justify-content: flex-end; 
 

 
} 
 
.box { 
 
    width: 100px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    border: 1px solid black; 
 
}

<div class="parent"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

Update: Um Reihenfolge der divs umkehren Sie flex-direction: column-reverse und justify-content: flex-start

.parent { 
 
    height: 300px; 
 
    width: 200px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
    align-items: flex-end; 
 
    justify-content: flex-start; 
 

 
} 
 
.box { 
 
    width: 100px; 
 
    height: 50px; 
 
    margin: 5px; 
 
    border: 1px solid black; 
 
}

<div class="parent"> 
 
    <div class="box">1</div> 
 
    <div class="box">2</div> 
 
    <div class="box">3</div> 
 
</div>

Answer 2

Sie Flexbox mit Flex können verwenden können -Richtung: column-reverse; und flex-wrap: wrap-reverse;:

.x { 
 
    width: 500px; 
 
    height: 500px; 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
    flex-wrap: wrap-reverse; 
 
    border: 1px solid red; 
 
    flex-grow: 0; 
 
    flex-basis: 0%; 
 
    } 
 
    .y { 
 
    width: 80px; 
 
    height: 80px; 
 
    border: 1px solid green; 
 
    margin: 3px; 
 
    }

<div class="x"> 
 
    <div class="y">1</div> 
 
    <div class="y">2</div> 
 
    <div class="y">3</div> 
 
    <div class="y">4</div> 
 
    <div class="y">5</div> 
 
</div>