#Container-Eigenschaften
| Eigenschaft | Werte | Beschreibung | |
|---|---|---|---|
display | flexinline-flex | Flex-Container aktivieren | |
flex-direction | rowrow-reversecolumncolumn-reverse | Hauptachsenrichtung festlegen | |
flex-wrap | nowrapwrapwrap-reverse | Umbruchverhalten festlegen | |
flex-flow | row nowrapcolumn wrap... | Kurzform für direction + wrap | |
justify-content | flex-startflex-endcenterspace-betweenspace-aroundspace-evenly | Hauptachsen-Ausrichtung | |
align-items | flex-startflex-endcenterstretchbaseline | Querachsen-Ausrichtung | |
align-content | flex-startflex-endcenterstretchspace-betweenspace-around | Mehrzeilige Querachsen-Ausrichtung | |
gap | 10px1rem10px 20px | Abstand zwischen Elementen |
#Element-Eigenschaften
| Eigenschaft | Werte | Beschreibung | |
|---|---|---|---|
order | 01-1... | Element-Reihenfolge | |
flex-grow | 012... | Wachstumsrate | |
flex-shrink | 01... | Schrumpfrate | |
flex-basis | auto0100px50% | Anfangsgröße | |
flex | 10 1 auto1 1 0... | Kurzform für grow shrink basis | |
align-self | autoflex-startflex-endcenterstretchbaseline | Individuelle Querachsen-Ausrichtung |
#Häufige Muster
| Eigenschaft | Werte | Beschreibung | |
|---|---|---|---|
Zentrieren | justify-content: centeralign-items: center | Perfekte Zentrierung | |
Abstand zwischen | justify-content: space-between | Erstes und letztes an den Rändern | |
Gleichmäßige Verteilung | justify-content: space-evenly | Gleicher Abstand überall | |
Vertikales Layout | flex-direction: column | Layout in vertikaler Richtung | |
Automatischer Umbruch | flex-wrap: wrap | Automatischer Umbruch bei Überlauf | |
Gleiche Breite | flex: 1 | Elemente mit gleicher Breite | |
Fest + flexibel | flex: 0 0 200pxflex: 1 | Seitenleiste + Hauptlayout |
#flex-Kurzwerte
| Eigenschaft | Werte | Beschreibung | |
|---|---|---|---|
flex: initial | = flex: 0 1 auto | Nur schrumpfen, Basis behalten | |
flex: auto | = flex: 1 1 auto | Kann wachsen und schrumpfen | |
flex: none | = flex: 0 0 auto | Feste Größe, kein Flex | |
flex: 1 | = flex: 1 1 0 | Gleichmäßige Verteilung |
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.