¶ Basics
¶ Container
¶ Flexbox aktivieren und horizontales Layout
.container{
display: flex;
flex-direction: row; // Standard
}
¶ Flexbox: Vertikales Layout
.container{
display: flex;
flex-direction: column;
}
¶ Umbruch auf neue Zeile
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
¶ Item
¶ Wachsen, Schrumpfen und Basisgröße
.item{
flex-grow: 1; /* default 1*/
flex-shrink: 1; /* default 0 */
flex-basis: 50px; /* default auto */
flex: 1 1 50px; /*Kurzform */
}