Flex-grow, flex-shrink und flex-basis in der Kurzschreibweise
Flex-grow, flex-shrink und flex-basis in der Kurzschreibweise

Flex-grow, flex-shrink und flex-basis in der Kurzschreibweise

Wiki

Was die Eigenschaften flex-basis, flex-grow und flex-shrink genau bewirken, das kannst Du in diesem Artikel nachlesen. Hier geht es lediglich um die verkürzte Schreibweise dieser 3 Eigenschaften

Wie bei margin und padding die wir nicht jedesmal für top, bottom, right und left neu definieren müssen ist es auch möchlich flex-grow, flex-shrink und flex-basis in einer einzigen Zeile zusammen zu fassen.

Die Kurzschreibweise sieht zum Beispiel so aus:

flex: 0 0 50%;

Was das zusammengefasst bedeutet:

  • Die Deklaration besteht nun nur noch aus der Eigenschaft flex
  • Die erste 0 steht für flex-grow und befielt dem Element dass es nicht wachsen darf
  • Die zweite 0 steht für flex-shrink und befielt dem Element dass es nicht schrunpfen darf
  • 50% steht für flex-basis und teilt dem Element mit dass es 50% der Breite seines Elternelements annehmen soll

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.