CSS, HTML & Javascript mit {stil}

order – Reihenfolge von Flex-Elementen per CSS ändern

display: flex setzt zwei, drei, vier Blogbeiträge in saubere Spalten 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, ohne das HTML zu verändern.

CSS flex order: Anordnen, sortieren und umordnen

CSS order für flex-Items

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>

Der Standardwert ist 0; flex-items mit kleinerem Wert erscheinen zuerst, die Elemente mit einem höheren Wert zeigen sich später. Negative Werte sind erlaubt: Ein Flex-Element mit order: -1 erscheint ganz vorn.

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

Suchen auf mediaevent.de