Flex Order – Reihenfolge per CSS ändern

CSS flex order: Anordnen, sortieren und umordnen

display flex ist die schmerzfreie Alternative zu CSS float. Flex setzt ein, zwei, drei Blogbeiträge in saubere Zeilen je nach Platzangebot im Browserfenster. Durch die Eigenschaft order ist die Reihenfolge der Flex-Elemente beliebig und die Elemente können bei jedem Breakpoint neu angeordnet werden.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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

Flex 1
Flex 2
Flex 3
Flex 4
Flex 5
Flex 6
Flex 7
Linear

.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

elem1
elem3
elem2
elem4
elem5
elem6
display flex mit Reihen und Spalten
.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

elem1
elem3
elem2
elem4
elem5
elem6

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.

display-flex in Grid-Container
display:grid für das Layout der Seite, display: flex in grid-area

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.