Block Raster von der rechten unteren Ecke

Question

Ich bin auf der Suche nach einem schönen CSS-Weg, um eine ungeordnete Liste zu bekommen immer in der unteren rechten Ecke enden. Zum Beispiel:

 || 1 || 2 
    3 || 4 || 5 

In einem normalen Block-Grid verwende ich schwebende Listenelemente. Ich habe Flexbox nach einer Lösung gesucht, bin aber nicht auf etwas befriedigendes gekommen.

Hinzufügen ein Element dieser Liste würde eine Liste wie folgt erzeugen:

1 || 2 || 3 
    4 || 5 || 6 

Ein anderes wäre

 ||  || 1 
    2 || 3 || 4 
    5 || 6 || 7 

Answer 1

Sie Flexbox mit flex-wrap: wrap-reverse und flex-direction: row-reverse verwenden können. Sie können so viele zusätzliche untergeordnete Elemente hinzufügen, wie Sie möchten. (Anmerkung: Ich verließ die Behälterhöhe bei Standard)

* { 
 
    box-sizing: border-box; 
 
    } 
 
    .x { 
 
    width: 302px; 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    flex-wrap: wrap-reverse; 
 
    border: 1px solid red; 
 
    flex-grow: 0; 
 
    flex-basis: 0%; 
 
    } 
 
    .y { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid green; 
 
    }

<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>

Answer 2

Sie tun können, ‚schwebt‘ in Flexbox mit Nutzung des Marge .

Wenn Sie wollen, dass es auf der rechten Seite schweben:

margin-left: auto; 

Ist das, was Sie gesucht haben? Oder mache ich es falsch: http://codepen.io/powaznypowazny/pen/ZLdBxa

Answer 3

Diese Lösung erfordert keine Kinder hart codierten Dimensionen haben. Sie können auch eine Mindesthöhe für Eltern festlegen, ohne dass Kinder automatisch den gesamten Raum vertikal füllen. Sie werden nur in der unteren rechten Ecke gestapelt, entsprechend ihrer Höhe.

Es ist die nächste Sache zu einem float:right beginnend von der unteren Ecke, in umgekehrter Reihenfolge.

parent { 
 
    display: flex; 
 
    flex-direction: row-reverse; 
 
    flex-wrap: wrap-reverse; 
 
    min-height: 100vh;   /* desired height */ 
 
    align-items: flex-end; 
 
    align-content: flex-start; 
 
} 
 
child { 
 
    flex: 1 0 33.3333%; 
 
    max-width: 33.3333%; 
 

 
    /* below mostly styling, not part of the layout solution */ 
 
    text-align: center; 
 
    box-sizing: border-box; 
 
    padding: 1rem; 
 
    border: 2px solid white; 
 
    background-color: #eee; 
 
} 
 

 
body {margin: 0;}

<parent> 
 
    <child> 1 </child> 
 
    <child> 2 </child> 
 
    <child> 3 </child> 
 
    <child> 4 </child> 
 
    <child> 5 </child> 
 
    </parent>