Arkusz skrótów układu CSS Flexbox
Ta strona zawiera wizualny arkusz skrótów układu CSS Flexbox, w tym właściwości kontenera, właściwości elementów i typowe przykłady układów.
Właściwości Kontenera
| Właściwość | Wartość | Opis |
|---|---|---|
display |
flex |
Włącza układ elastyczny |
flex-direction |
row |
Oś główna jest pozioma, początek po lewej stronie |
row-reverse |
Oś główna jest pozioma, początek po prawej stronie | |
column |
Oś główna jest pionowa, początek na górze | |
column-reverse |
Oś główna jest pionowa, początek na dole | |
flex-wrap |
nowrap |
Wartość domyślna, elementy są ułożone w jednej linii |
wrap |
Elementy zawijają się do nowej linii | |
wrap-reverse |
Elementy zawijają się w odwrotnej kolejności | |
justify-content |
flex-start |
Wyrównanie osi głównej: do lewej |
flex-end |
Wyrównanie osi głównej: do prawej | |
center |
Wyrównanie osi głównej: wyśrodkowane | |
space-between |
Wyrównanie osi głównej: wyrównanie do obu stron, odstępy między elementami są równe | |
space-around |
Wyrównanie osi głównej: równe odstępy wokół każdego elementu | |
align-items |
flex-start |
Wyrównanie osi poprzecznej: do góry |
flex-end |
Wyrównanie osi poprzecznej: do dołu | |
center |
Wyrównanie osi poprzecznej: wyśrodkowane | |
baseline |
Wyrównanie osi poprzecznej: wyrównanie do linii bazowej tekstu | |
stretch |
Wartość domyślna, wyrównanie osi poprzecznej: rozciągnięcie, aby wypełnić kontener | |
align-content |
flex-start |
Wyrównanie osi poprzecznej (wiele linii): do góry |
flex-end |
Wyrównanie osi poprzecznej (wiele linii): do dołu | |
center |
Wyrównanie osi poprzecznej (wiele linii): wyśrodkowane | |
space-between |
Wyrównanie osi poprzecznej (wiele linii): wyrównanie do obu stron, odstępy między liniami są równe | |
space-around |
Wyrównanie osi poprzecznej (wiele linii): równe odstępy wokół linii | |
stretch |
Wartość domyślna, wyrównanie osi poprzecznej (wiele linii): rozciągnięcie, aby wypełnić pozostałą przestrzeń |
Właściwości Elementów (Items)
| Właściwość | Wartość | Opis |
|---|---|---|
flex-grow |
liczba |
Definiuje proporcję powiększania się elementu, domyślnie 0 (brak powiększania) |
flex-shrink |
liczba |
Definiuje proporcję zmniejszania się elementu, domyślnie 1 |
flex-basis |
auto |
Definiuje domyślny rozmiar elementu przed podziałem pozostałej przestrzeni |
align-self |
auto |
Pozwala na indywidualne wyrównanie elementu, nadpisuje właściwość align-items |
flex-start |
Element znajduje się na początku kontenera | |
flex-end |
Element znajduje się na końcu kontenera | |
center |
Element znajduje się w środku | |
baseline |
Linia bazowa elementu wyrównana do linii bazowej kontenera | |
stretch |
Element rozciąga się, aby wypełnić kontener (jeśli kontener ma wysokość) |
Typowe przykłady układów
| Układ | Właściwości kontenera | Właściwości elementów |
|---|---|---|
| Poziomy pasek nawigacyjny | display: flex;justify-content: space-around; |
|
| Pionowy pasek boczny | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Układ siatki | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Układ kart | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |