CSS Flexbox Layout Cheat Sheet
Denna sida ger en visuell cheat sheet för CSS Flexbox-layout, inklusive containeregenskaper, objektegenskaper och vanliga layoutexempel.
Containeregenskaper
| Egenskap | Värde | Beskrivning |
|---|---|---|
display |
flex |
Aktivera elastisk layout |
flex-direction |
row |
Huvudaxeln är horisontell, startpunkt till vänster |
row-reverse |
Huvudaxeln är horisontell, startpunkt till höger | |
column |
Huvudaxeln är vertikal, startpunkt högst upp | |
column-reverse |
Huvudaxeln är vertikal, startpunkt längst ner | |
flex-wrap |
nowrap |
Standardvärde, objekt placeras på en linje |
wrap |
Objekt radbryts | |
wrap-reverse |
Objekt radbryts i omvänd ordning | |
justify-content |
flex-start |
Justering av huvudaxeln: vänsterjusterad |
flex-end |
Justering av huvudaxeln: högerjusterad | |
center |
Justering av huvudaxeln: centrerad | |
space-between |
Justering av huvudaxeln: jämnt fördelat mellan objekt, första vid start och sista vid slut | |
space-around |
Justering av huvudaxeln: jämnt fördelat med utrymme runt objekten | |
align-items |
flex-start |
Justering av tväraxeln: justerad mot toppen |
flex-end |
Justering av tväraxeln: justerad mot botten | |
center |
Justering av tväraxeln: centrerad | |
baseline |
Justering av tväraxeln: justerad efter textens baslinje | |
stretch |
Standardvärde, justering av tväraxeln: sträcks ut för att fylla containern | |
align-content |
flex-start |
Justering av tväraxeln (flera rader): justerad mot toppen |
flex-end |
Justering av tväraxeln (flera rader): justerad mot botten | |
center |
Justering av tväraxeln (flera rader): centrerad | |
space-between |
Justering av tväraxeln (flera rader): jämnt fördelat med utrymme mellan rader | |
space-around |
Justering av tväraxeln (flera rader): jämnt fördelat med utrymme runt rader | |
stretch |
Standardvärde, justering av tväraxeln (flera rader): sträcks ut för att fylla återstående utrymme |
Objektegenskaper (Items)
| Egenskap | Värde | Beskrivning |
|---|---|---|
flex-grow |
number |
Definierar tillväxtfaktorn för ett objekt, standard är 0 (växer inte) |
flex-shrink |
number |
Definierar krympfaktorn för ett objekt, standard är 1 |
flex-basis |
auto |
Definierar standardstorleken för ett objekt innan återstående utrymme fördelas |
align-self |
auto |
Tillåter individuell justering för ett specifikt objekt (överskrider align-items) |
flex-start |
Objektet placeras i början av containern | |
flex-end |
Objektet placeras i slutet av containern | |
center |
Objektet placeras i mitten | |
baseline |
Objektets baslinje justeras mot containerns baslinje | |
stretch |
Objektet sträcks ut för att fylla containern (om containern har en höjd) |
Vanliga layoutexempel
| Layout | Containeregenskaper | Objektegenskaper |
|---|---|---|
| Horisontell navigeringslist | display: flex;justify-content: space-around; |
|
| Vertikal sidolist | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Rutnätslayout | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Kortlayout | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |