bookmark_borderbookmark
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
W siódmym przykładzie połączmy znane Ci już koncepcje, by utworzyć elastyczny układ z automatycznie umieszczanymi w nim elementami elastycznymi. Całkiem ładnie. Najważniejsze hasła do zapamiętania to repeat, auto-(fit|fill) i minmax(). Nazwy te przypominają skrót RAM.
Ponownie używasz słowa kluczowego repeat(), ale tym razem ze słowem kluczowym auto-fit, a nie z bezpośrednią wartością liczbową. Umożliwia to automatyczne umieszczanie tych elementów podrzędnych. Te dzieci mają podstawową wartość minimalną 150px, a maksymalną wartość 1fr, co oznacza, że na mniejszych ekranach będą zajmować pełną szerokość 1fr. Gdy dojdą do 150px szerokości, zaczną przechodzić do tej samej linii.
W auto-fit wszystkie całkowicie puste ścieżki zwijają się do 0, a wypełnione ścieżki powiększają się i zajmują miejsce. Jeśli jednak zmienisz to ustawienie na auto-fill, puste ścieżki zajmą taką samą ilość miejsca, jak gdyby zostały wypełnione:
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 2023-10-25 UTC."],[],[]]