flex-grow, flex-shrink, flex-basis für Zeilen in Spalten

CSS flex, grow, shrink

Der Gutenberg-Editor liefert dank CSS flex und CSS grid Spalten gleicher Höhe, aber die Zeilen der Spalten variieren je nach Inhalt. flex-grow, flex-shrink und flex-basis bringen die Zeilen auf eine Höhe.

18-12-15 SITEMAP

Es ist schon einige Jahr her, da hat CSS Spalten gleicher Höhe zu einen Heiligen Gral gemacht. Heute haben wir CSS flex und CSS grid und das Problem hat sich erledigt. Die neue Herausforderung sind Spalten mit Zeilen gleicher Höhe, die z.B., um einen Vergleich zu präsentieren oder die Kurzfassung von Blogbeiträgen.

https://www.mediaevent.de/html/table-HTML-Tabelle.htmlDie Sache mit den Spalten hat uns der Gutenberg-Editor leicht gemacht. Was dabei allerdings nicht out-of-the-box geliefert wird, sind Zeilen gleicher Höhe innerhalb der Spalten (wie einst HTML-Tabellen).

Kurzer Header

120 P

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec eros a ante mollis egestas eu in risus. 

Langer Header mit zweiter Zeile

170 P
nur heute
bis Mitternacht

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis pulvinar iaculis tempus. Maecenas scelerisque sit amet est non finibus. Duis imperdiet sem eu venenatis pretium. Morbi laoreet rutrum tempus.

Column zu Column

Von Haus aus liefert Gutenberg das CSS für die Spalten als display:flex mit flex-basis und flex-grow.

@media (min-width: 782px), all
  .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
    display: flex;
    flex-direction:column;
}

Die Spalten werden ebenfalls mit display:flex ausgestattet, die Richtung der Spalten innerhalb von wp-block-column mit flex-direction: column.

Jetzt ist also jede Gutenberg-Spalte eine spaltenorientierte Flexbox. CSS flex (Kurzschrift für flex-grow, flex-shrink, flex-basis) zieht die Zeilen der Spalten auf die jeweils selbe Höhe. Dafür bekommt jede Zeile eine CSS-Klasse unter Erweitert: cheader, cimage, cprice, ctext.

@media (min-width: 600px) {
   .cheader {
      flex: 1 1 10%
   }
   .cimage {
      flex: 1 1 30%;
   }
   .cprice {
      flex: 1 1 10%;
   }
   .ctext { 
      flex: 1 1 15%;
   }
}

Die Werte für flex-grow, flex-shrink und flex-basis halten Variationen aus, wenn auch in Grenzen. Auf jeden Fall sind sie also keine allgemeine Einstellung, sondern müssen an die eigenen Inhalte angepasst werden.

CSS Breite von Elementen und Höhe von Elementen

Bei spaltenorientierten Blöcken mit flex-wrap: wrap brechen Blöcke um, sobald die Elemente breiter als der Inhalt sind. Zeilenorientiere Blöcke hingegen brauchen eine ausdrückliche Angabe der Höhe, damit flex-basis in Kraft tritt.

Jeder Spaltenblock bekommt also eine eigene CSS-Klasse mirror, der eine Höhe zugewiesen wird.

.wp-block-columns.mirror .wp-block-column{
  max-height: 640px;
}

Bilder in Spalten begrenzen

Das Bild nimmt weiterhin seine volle Höhe entsprechend max-width:100%, height:auto ein. Höhe auf flex-basis begrenzen funktioniert mit CSS overflow.

.cimage {
  flex: 1 1 30%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

Dann zeigen Bilder nur ihren Anfang. Um Bilder vertikal zu zentrieren, spring wieder display: flex ein.

flex-grow und flex-shrink

Wenn per flex-basis wie hier nur 70% des Platzangebots verteilt sind, bleiben 30% zur freien Verfügung, die mit flex-grow und flex-shrink verteilt werden können.

Im zweiten Beispiel haben die Bilder unterschiedliche Seitenverhältnisse. Damit sie in der Darstellung trotzdem auf dieselbe Höhe kommen, muss das Gutenberg-CSS weiter überschrieben werden.

.cimage {
   flex:1 1 30%;
   display:flex; 
   flex-direction: column; 
   overflow:hidden;
   justify-content:center;
}

Spalte 1

Bilder mit unterschiedlichen Seitenverhältnissen

Spalte 2

Bilder einpassen

Spalten-Blöcke mit CSS grid

Das ist die Alternative zu CSS flex. Das Gutenberg-CSS für Columns wird von display-flex zu display-grid überschrieben.

.wp-block-columns {
   display: grid;
   grid-template-columns: 8fr 1fr 8fr;
}

Jede Spalte wird zu einem Grid:

.wp-block-column {
   display: grid;
   grid-template-rows: 20% 30% 20% 30%
}

Mehr zur Zeilen und Spalten im Layout von Webseiten

Externe Quellen

2019-11-16 SITEMAP BLOG