Computer CSS Flex

Das ultimative Flex-Tutorial

Links

Ausgangssituation

Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:block;
}

.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

<div class="container">
<div class="card">Hallo,</div>
<div class="card">das ist ein Test.</div>
<div class="card">Und jetzt mit einigen weiteren Worten...</div>
</div>
<div style="margin:1rem;"></div>
<div class="container">
<div class="card">Lorem ipsum dolor sit amet.</div>
<div class="card">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.</div>
<div class="card">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.</div>
</div>

Flex-Default-Verhalten

  • Karten nehmen sich die Breite, der durch den Text vorgegeben ist.
  • Horizontaler Platz bleibt frei.
  • Vertikaler Platz wird ausgefüllt (Hier Display-Fehler).
  • Standard-Einstellung
flex-shrink: 1  /* Karte darf verkleinert werden */
flex-grow:   0  /* Freier horizontaler Raum wird auf Karten verteilt */
flex-basis:  auto /* Anfängliche Breite, Werte: auto, 10rem, 200px, 10% */

Kurzschreibeweise flex <shrink> <grow> <basis>

Default-Verhalten

Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
gap:2rem;
}

.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

Container mit größerer Breite

  • Übrige horizontaler Raum bleibt ungenutzt (s. oben)

Container mit kleiner Breite

  • Karten werden kleiner
  • Overflow passiert, falls die Breite kleiner ist min-content


Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
gap:2rem;
width:30%;
}

.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

Flex-grow/shrink/basis

Flex-grow wird angeschaltet: 1

  • Der übrige horizontale Raum wird auf die Karten verteilt.
  • justify-content hat jetzt keine Auswirkung mehr!!!


Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
gap:2rem;
}

.container > * {
  flex-grow:1;    

  /* Defaults 
  flex-shrink:1;
  flex-grow:0;
  flex-basis:auto;
  */
}

.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

Flex-shrink wird ausgeschaltet: 0

  • Karten werden nicht verkleinert, overflow passiert.


Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
gap:2rem;
width:30%;

}

.container > * {
  flex-shrink:0;    

  /* Defaults 
  flex-shrink:1;
  flex-grow:0;
  flex-basis:auto;
  */
}

.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

Flex-basis wird verändert: 0, 100%, 10rem

  • flex-basis ist ähnlich wie width (außer flex-basis:0 setzt width auf min-content)
  • Benutze nur eins: flex-basis oder width

Flex-basis: 0

  • Alle Karten erhalten width:min-content


Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
gap:2rem;
}

.container > * {
  flex-basis:0;    

  /* Defaults 
  flex-shrink:1;
  flex-grow:0;
  flex-basis:auto;
  */
}

.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

Flex-basis: 100%

  • Alle Karten sind gleich groß in der Breite.
  • Das gleiche wird gemacht,
flex: 1; /* = flex: 1 1 0; */
  • Alternative:
width: 100%;


Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
gap:2rem;
}

.container > * {
  flex-basis:100%;    

  /* Defaults 
  flex-shrink:1;
  flex-grow:0;
  flex-basis:auto;
  */
}

.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

Flex-basis: 10rem

  • Alle Karten sind 10rem gleich groß in der Breite.


Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
gap:2rem;
}

.container > * {
  flex-basis:10rem;    

  /* Defaults 
  flex-shrink:1;
  flex-grow:0;
  flex-basis:auto;
  */
}

.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

Flex-wrap

Auswirkungen von flex-wrap: wrap

  • Karten brechen um, kein overflow.
  • Overflow passiert, falls width: min-content unterschritten wird.


Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
flex-wrap: wrap;
gap:2rem;
width:30%;
}

.container > * {
  /* Defaults 
  flex-shrink:1;
  flex-grow:0;
  flex-basis:auto;
  */
}

.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}


Volle Größe beim Umbrechen

  • Karten nehmen beim Umbrechen die maximale Breite an.


Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
flex-wrap: wrap;
gap:2rem;
width:30%;
}

.container > * {
  flex-grow:1;    

  /* Defaults 
  flex-shrink:1;
  flex-grow:0;
  flex-basis:auto;
  */
}
 
.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

Umschalten Zeilen / Spalten mit media-query

Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
flex-direction: column;
gap:2rem;
}

.container > * {
flex-basis:100%;    

/* Defaults 
flex-shrink:1;
flex-grow:0;
flex-basis:auto;
*/
}


@media (min-width: 800px) {
  .container {
      flex-direction:row;
   }
} 


.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

Justify-content

  • default: flex-start;

Align-items

  • default: stretch;

Ohne stretch

Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
gap:2rem;
align-items: flex-start;
min-height:5rem;
}

.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

align-self

Hallo,
das ist ein Test.
Und jetzt mit einigen weiteren Worten...
Lorem ipsum dolor sit amet.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, ex.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus magnam, blanditiis exercitationem tempore eveniet ducimus? Dolore sed eligendi distinctio id.
* {
box-sizing: border-box;
}

.container {
border: 1px firebrick solid; 
display:flex;
gap:2rem;
align-items: flex-start;
min-height:5rem;
}

.card:nth-child(1) { 
 background-color: pink;
 align-self:stretch;
}

.card {
background-color: rgba(255,255,0,0.6);
border-radius: 20px;
min-height: 4rem;
margin-bottom: 1rem;
padding:0.5rem;
}

Traps and Pitfalls

flex-grow:1 -> justify-content

justify-content funktioniert nach flex-grow:1 nicht mehr.

flex-direction: column -> use height

justify-content braucht nun eine Höhe, um Platz verwenden zu können. 

flex-direction: column;
justify-content: center;
min-height: 100vh;

space-around -> space-evenly

Benutze 

justify-content: space-evenly;

anstatt space-around

Flex vs Grid

2023-03-04-css-flex-vs-grid.jpg

Standard-Einstellung

Lorem
ipsum
dolor
sit
amet
consectetur
adipisicing
elit.
Voluptatibus
hic!
Lorem
ipsum
dolor
sit
amet
consectetur
adipisicing
elit.
Voluptatibus
hic!
* {
   box-sizing: border-box;
} 

.container { /*FLEX*/
   border: 5px solid hotpink;
   display:flex;
   flex-wrap:wrap;
   gap:1rem;
   width:30%;           
} 

.container { /*GRID*/
   border: 5px solid hotpink;
   display:grid;
   grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
   gap:1rem;
   width:30%;           
} 

.card {
   font-family: sans-serif;   
   background-color: rgb(19, 32, 111);
   color: rgb(212, 223, 255);
   border: 1px rgb(162, 172, 236) solid;
   padding:0.5rem;
} 

<div class="container">
    <div class="card">Lorem</div>
    <div class="card">ipsum</div>
    <div class="card">dolor</div>
    <div class="card">sit</div>
    <div class="card">amet</div>
    <div class="card">consectetur</div>
    <div class="card">adipisicing</div>
    <div class="card">elit.</div>
    <div class="card">Voluptatibus</div>
    <div class="card">hic!</div>
</div>

flex:1 nutzt den gesamten Raum

Lorem
ipsum
dolor
sit
amet
consectetur
adipisicing
elit.
Voluptatibus
hic!
Lorem
ipsum
dolor
sit
amet
consectetur
adipisicing
elit.
Voluptatibus
hic!
* {
   box-sizing: border-box;
} 

.container { 
   border: 5px solid hotpink;
   display:flex;
   flex-wrap:wrap;
   gap:1rem;
   width:30%;           
} 

.container > * {
  flex: 1; /* = flex: 1 1 0; */
  /* Defaults 
     flex-shrink:1;
     flex-grow:0;
     flex-basis:auto;
  */
}

.card {
   font-family: sans-serif;   
   background-color: rgb(19, 32, 111);
   color: rgb(212, 223, 255);
   border: 1px rgb(162, 172, 236) solid;
   padding:0.5rem;
}

flex-basis:100% nutzt den gesamten Raum, Spalten gleich groß

Vorsicht:

  • flex-wrap: wrap darf nicht hinzugefügt werden!
  • min-content aller Elemente darf nicht die Größe des Containers überschreiten!


Lorem
ipsum
dolor
sit
amet
consectetur
adipisicing
elit.
Voluptatibus
hic!
Lorem
ipsum
dolor
sit
* {
   box-sizing: border-box;
} 

.container { 
   border: 5px solid hotpink;
   display:flex;
   flex-wrap:nowrap;
   gap:1rem;
   width:30%;           
} 

.container > * {
  flex-basis: 100%; /* = flex: 1 1 0; */
  /* Defaults 
     flex-shrink:1;
     flex-grow:0;
     flex-basis:auto;
  */
}

.card {
   font-family: sans-serif;   
   background-color: rgb(19, 32, 111);
   color: rgb(212, 223, 255);
   border: 1px rgb(162, 172, 236) solid;
   padding:0.5rem;
}

Grid ähnlich nutzen wie flex

In Spalten anordnen

display: grid;
grid-auto-flow: column;

Mit 3 Spalten

display: grid;
grid-template-columns: 1fr 1fr 1fr;

oder 

display: grid;
grid-template-columns: repeat(3,1fr);

autofit: Min/Max-Größe

display: grid;
grid-template-columns: repeat(autofit,minmax(5rem,1fr));

Layout-Patterns

Spalten gleich groß: nimm grid!

Lorem
ipsum
dolor
sit
amet
consectetur
adipisicing
elit.
Voluptatibus
hic!
* {
   box-sizing: border-box;
} 

.container { /*GRID*/
   border: 5px solid hotpink;
   display:grid;
   grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
   gap:1rem;
   width:30%;           
}

oder 3 Spalten 

.container { /*GRID*/
   border: 5px solid hotpink;
   display:grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap:1rem;
   width:30%;           
} 

.card {
   font-family: sans-serif;   
   background-color: rgb(19, 32, 111);
   color: rgb(212, 223, 255);
   border: 1px rgb(162, 172, 236) solid;
   padding:0.5rem;
} 

<div class="container">
    <div class="card">Lorem</div>
    <div class="card">ipsum</div>
    <div class="card">dolor</div>
    <div class="card">sit</div>
    <div class="card">amet</div>
    <div class="card">consectetur</div>
    <div class="card">adipisicing</div>
    <div class="card">elit.</div>
    <div class="card">Voluptatibus</div>
    <div class="card">hic!</div>
</div>

Spalten gleich groß, kein wrap: flex

.even-columns {
  display: flex;
  gap: 1rem;
}

.even-columns > * {
  flex-basis: 100%;
}

oder 

.even-columns > * {
  flex:1; /* = flex: 1 1 0;*/
}


Lorem
ipsum
dolor
sit

Vorsicht:

  • flex-wrap: wrap darf nicht hinzugefügt werden!
  • min-content aller Elemente darf nicht die Größe des Containers überschreiten!

Spalten gleich groß mit wrap: (fast) wie grid

.gridish {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
} 

.gridish > * {
  flex: 1 1 10rem;
}

oder drei Spalten: 

.gridish > * {
  flex: 1 1 33%;
}


Lorem
ipsum
dolor
Lorem
ipsum
dolor
sit


Vorsicht:

  • sind in der letzten Zeile weniger Elemente, dann erhalten sie den gesamten Raum der Zeile

Spalten aufgeteilt: flex

.content-sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.content-sidebar *:nth-child(1) {
  flex: 1 1 70%;
  min-width: 25ch;
} 

.content-sidebar *:nth-child(2) {
  flex: 1 1 25%;
  /*max-width:25%; evt für letzte Element*/
}


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sint soluta ipsam, vero eveniet, aut nemo corporis fugiat, rem maxime repellendus eaque officiis sit laborum eligendi error. Cumque, saepe ratione. Unde earum doloremque, explicabo, sed accusamus officia laboriosam, porro nisi natus mollitia facere. Dolor, consequatur quia dignissimos maiores nihil dolore illum veniam eligendi, consequuntur veritatis cum quis voluptatum amet facilis optio sequi quos, est harum nostrum molestiae praesentium velit iure ducimus natus. Nobis laborum officiis soluta modi necessitatibus sint? Omnis architecto doloremque id ipsum impedit, eligendi cumque dicta explicabo quibusdam odit, maxime veritatis harum nisi sit magnam modi, reprehenderit distinctio.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa distinctio aliquid ducimus nam praesentium similique labore cumque nisi. Magnam, ratione!

Spalten aufgeteilt: Main-Sidebar, Umbruch width 100%

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sint soluta ipsam, vero eveniet, aut nemo corporis fugiat, rem maxime repellendus eaque officiis sit laborum eligendi error. Cumque, saepe ratione. Unde earum doloremque, explicabo, sed accusamus officia laboriosam, porro nisi natus mollitia facere. Dolor, consequatur quia dignissimos maiores nihil dolore illum veniam eligendi, consequuntur veritatis cum quis voluptatum amet facilis optio sequi quos, est harum nostrum molestiae praesentium velit iure ducimus natus. Nobis laborum officiis soluta modi necessitatibus sint? Omnis architecto doloremque id ipsum impedit, eligendi cumque dicta explicabo quibusdam odit, maxime veritatis harum nisi sit magnam modi, reprehenderit distinctio.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa distinctio aliquid ducimus nam praesentium similique labore cumque nisi. Magnam, ratione!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum sint soluta ipsam, vero eveniet, aut nemo corporis fugiat, rem maxime repellendus eaque officiis sit laborum eligendi error. Cumque, saepe ratione. Unde earum doloremque, explicabo, sed accusamus officia laboriosam, porro nisi natus mollitia facere. Dolor, consequatur quia dignissimos maiores nihil dolore illum veniam eligendi, consequuntur veritatis cum quis voluptatum amet facilis optio sequi quos, est harum nostrum molestiae praesentium velit iure ducimus natus. Nobis laborum officiis soluta modi necessitatibus sint? Omnis architecto doloremque id ipsum impedit, eligendi cumque dicta explicabo quibusdam odit, maxime veritatis harum nisi sit magnam modi, reprehenderit distinctio.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa distinctio aliquid ducimus nam praesentium similique labore cumque nisi. Magnam, ratione! 
* {
   box-sizing: border-box;
}

.container {
   border: 5px solid hotpink;
   display:flex;
   flex-wrap:wrap;
   gap:1rem;
   width:50%; 
} 


.container > :first-child {
   flex-basis:68%;
   flex-grow:9999;
   border: 1px dashed black;
} 

.container > :last-child {
   flex-basis:28%;
   flex-grow:1;
   border: 1px dashed black;
}

.card {
   font-family: sans-serif;   
   background-color: rgb(19, 32, 111);
   color: rgb(212, 223, 255);
   border: 1px rgb(162, 172, 236) solid;
   padding:0.5rem;
}

    <div class="card"> Lorem ipsum ....</div>
    <div class="card"> Lorem ipsum dolor ...</div>
 </div>

Grid zum Scrollen

Lorem
ipsum
dolor
sit
amet
consectetur
adipisicing
elit.
Voluptatibus
hic!
* {
   box-sizing: border-box;
} 

.container { /*GRID*/
   border: 5px solid hotpink;
   display:grid;
   grid-auto-flow: column;
   grid-auto-columns: 20%;
   overflow-x: scroll;
   scroll-snap-type: x mandatory;
   gap:1rem;
   width:30%;           
} 

.container > * {
   scroll-snap-align: start;
}
 
.card {
   font-family: sans-serif;   
   background-color: rgb(19, 32, 111);
   color: rgb(212, 223, 255);
   border: 1px rgb(162, 172, 236) solid;
   padding:0.5rem;
}