CSS flex-order
order platziert jedes einzelne Element einer Flexbox in ein Feld der Wahl, ohne dabei die Reihenfolge des Inhalts im Markup zu ändern.
.elem1 { order: 2; }
.elem2 { order: 1; }
…
<div class="elem1"> Element1 </div>
<div class="elem2"> Element2 </div>
order ändert nur die sichtbare Darstellung, so dass Inhalte in ihrer logischen Reihenfolge im HTML-Quelltext bleiben.
.medium {
display: flex; flex-wrap: wrap;
justify-content: space-between;
}
.flex1 { order: 4; width: 30% }
.flex2 { order: 3; width: 30% }
.flex3 { order: 2; width: 30% }
.flex4 { order: 1; width: 48% }
.flex5 { order: 7; width: 48% }
.flex6 { order: 6; width: 48% }
.flex7 { order: 5; width: 48% }
.medium {
display: flex; flex-wrap: wrap;
justify-content: space-between;
}
.flex1 { width: 48% }
.flex2 { width: 48% }
.flex3 { width: 100% }
.flex4 { width: 30% }
.flex5 { width: 30% }
.flex6 { width: 30% }
.flex7 { width: 100% }
}
Unregelmäßige Verteilung der Flexboxen
Mit display : flex braucht eine unregelmäßige Verteilung zusätzliches Markup, denn elem1 und elem3 müssten zusammen in eine zusätzliche spaltenorientierte Flexbox (flex-direction : column). Und schon ist es mit der Freiheit des Platzierens vorbei: elem2 und elem3 können nicht mehr getauscht werden.
Flex-Container
.flexcontainer { display: flex; flex-wrap: wrap; justify-content: space-between }
.flexcol { width: 66%; display: flex; flex-direction: column}
<div class="flexbox">
<div class="flexcol">
<div class="elem1">elem1</div>
<div class="elem3">elem3</div>
</div>
<div class="elem2">elem2</div>
<div class="elem4">elem4</div>
<div class="elem5">elem5</div>
<div class="elem6">elem6</div>
</div>
Das Schöne an display: grid – dem anderen Modell für das Positionieren von Elementen – ist die Freiheit bei der Positionierung von Blöcken im sichtbaren Layout-Raster: Egal, in welcher Reihenfolge die Elemente im Markup erscheinen – sie können zielgenau ohne zusätzliches HTML-Markup auf einen Platz im Layoutraster gesetzt werden.
Grid-Container
Das CSS für display grid wächst schnell bei mehr als vier oder fünf Gridzellen.
@media (min-width: 680px) {
.gridcontainer {
display: grid;
grid-template-columns: 32% 32% 32%;
grid-gap: 10px;
display: -ms-grid;
-ms-grid-columns: 32% 32% 32%;
-ms-grid-gap: 10px;
width: 580px; margin: 1em auto; padding: 10px; box-sizing: border-box;
}
.elem1 {
grid-row: 1;
grid-column: 1 / 3;
-ms-grid-column:1;
-ms-grid-row:1;
-ms-grid-column-span: 2;
}
.elem2 {
grid-row: 1 / 3;
grid-column: 3 ;
-ms-grid-column:3;
-ms-grid-row:1;
-ms-grid-column-align: start;
-ms-grid-row-align: start;
-ms-grid-row-span: 2;
-ms-grid-row-align: stretch;
}
.elem3 {
grid-row: 2 ;
grid-column: 1 / 3;
-ms-grid-column:1;
-ms-grid-row:2;
-ms-grid-column-align: start;
-ms-grid-row-align: start;
-ms-grid-column-span: 2;
}
.elem4 {
grid-row: 3 ;
grid-column: 1 ;
-ms-grid-column:1;
-ms-grid-row:3;
}
.elem5 {
grid-row: 3 ;
grid-column: 2 ;
-ms-grid-column:2;
-ms-grid-row:3;
}
.elem6 {
grid-row: 3 ;
grid-column: 3 ;
-ms-grid-column:3;
-ms-grid-row:3;
}
}
Scrollen, um alle CSS-Deklarationen zu sehen
display: flex vs. display: grid
CSS Grid ist ein Layout-Raster – ähnlich dem alten Tabellen-Layout – in Zeilen und Spalten.
Grid und Flex konkurrieren nicht miteinander, sondern ergänzen sich. display flex bringt beliebig viele Elemente in Form und eignet sich besonders gut für die Übersicht über 6 oder 10 Blogbeiträge. Die aufwändige Landingpage oder Startseite von WordPress bringt ihre Elemente effektreich mit display grid unter, mittendrin eine Gridzelle als Flexbox für die Blogbeiträge.
