Podcast o CSS – 009: Układ
Wyobraź sobie, że pracujesz jako programista, a współpracownik z projektu wręcza Ci projekt zupełnie nowej witryny. Projekt oferuje różne ciekawe układy i kompozycje: dwuwymiarowe układy uwzględniające szerokość i wysokość widocznego obszaru oraz układy, które muszą być elastyczne i elastyczne. Jak wybrać najlepszy sposób stylizacji za pomocą CSS?
CSS pozwala na różne sposoby rozwiązywania problemów z układem: na osi poziomej, pionowej, a nawet obu. Wybór odpowiedniej metody układu dla kontekstu może być trudny, a rozwiązanie problemu często wymaga więcej niż jednej metody. Aby Ci w tym pomóc, w kolejnych modułach poznasz unikalne cechy poszczególnych mechanizmów układu CSS, które wpływają na podejmowanie decyzji.
Układ: krótka historia
W początkach internetu projektuje się bardziej złożony niż prosty dokument z elementami <table>
.
Oddzielenie kodu HTML od stylów wizualnych stało się łatwiejsze, gdy pod koniec lat 90. XX wieku przeglądarki stały się powszechnie używane.
CSS umożliwił deweloperom całkowitą zmianę wyglądu i sposobu działania witryny bez konieczności ingerowania w kod HTML.
Te nowe możliwości zainspirowały nas np. do projektu The CSS Zen Garden, który ma zademonstrować możliwości CSS i zachęcić większą liczbę deweloperów do poznawania tej technologii.
Usługi porównywania cen ewoluują wraz z ewolucją naszych potrzeb w zakresie projektowania stron i technologii przeglądarek. O tym, jak z czasem zmieniały się układ CSS i nasze podejście do układu, możesz przeczytać w tym artykule napisanej przez Rachel Andrew.
Układ: teraźniejszość i przyszłość
Nowoczesny kod CSS udostępnia niezwykle zaawansowane narzędzia układu. Mamy specjalne systemy do obsługi układów tych reklam. Zanim przejdziemy do dalszych modułów, omówimy je szczegółowo.
Informacje o właściwości display
Właściwość display
spełnia 2 funkcje.
Pierwszą rzeczą, jaką wykonuje on, jest określenie, czy pole, dla którego został zastosowany, ma pełnić funkcję elementu wbudowanego czy blokowego.
.my-element {
display: inline;
}
Elementy w tekście działają jak słowa w zdaniu.
Znajdują się one obok siebie w wierszu.
Elementy takie jak <span>
i <strong>
, które zwykle służą do określania stylu fragmentów tekstu w elementach takich jak <p>
(akapit), są domyślnie umieszczone w tekście.
Zachowują też otaczającą przestrzeń.
Nie można bezpośrednio określić szerokości ani wysokości elementów wbudowanych. Wszelkie marginesy i dopełnienie na poziomie bloku będą ignorowane przez sąsiadujące z nimi elementy.
.my-element {
display: block;
}
Elementy z bloków nie znajdują się obok siebie. Tworzy dla siebie nową linię. Jeśli nie zmienisz innego kodu CSS, element blokowy rozwinie się do rozmiaru wbudowanego wymiaru, więc rozciąga się na całą szerokość w trybie pisania w poziomie. Margines po wszystkich stronach elementu blokowego jest uwzględniany.
.my-element {
display: flex;
}
Właściwość display
określa też sposób zachowania elementów podrzędnych elementu.
Na przykład ustawienie właściwości display
na display: flex
sprawia, że pole staje się polem na poziomie bloku, a także konwertuje jego elementy podrzędne na elementy elastyczne.
Włącza właściwości Flex, które kontrolują wyrównywanie, kolejność i przepływ.
Flexbox i siatka
Istnieją 2 główne mechanizmy, które tworzą reguły układu dla wielu elementów: flexbox i siatka. Są podobne, ale mają na celu rozwiązywanie różnych problemów z układem.
Flexbox
.my-element {
display: flex;
}
Flexbox to mechanizm układów jednowymiarowych. układaj się względem jednej osi, poziomo lub pionowo. Domyślnie funkcja Flexbox wyrównuje elementy podrzędne elementu obok siebie w kierunku linii i rozciąga je w kierunku bloku, aby mieć tę samą wysokość.
Elementy pozostaną na tej samej osi i nie zawijają się, gdy skończy im się miejsce.
Zamiast tego będą oni starali się ściskać tę samą linię co siebie.
To działanie można zmienić za pomocą właściwości align-items
, justify-content
i flex-wrap
.
Flexbox konwertuje też elementy podrzędne na elementy elastyczne, co oznacza, że możesz pisać reguły zachowania ich w kontenerze elastycznym.
Możesz zmienić wyrównanie, kolejność i uzasadnienie pojedynczego elementu.
Za pomocą właściwości flex
możesz też zmienić sposób jego zmniejszania i powiększania.
.my-element div {
flex: 1 0 auto;
}
Właściwość flex
to skrót nazw flex-grow
, flex-shrink
i flex-basis
.
Powyższy przykład możesz rozwinąć w ten sposób:
.my-element div {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
Deweloperzy podają te reguły niskiego poziomu, aby wskazać przeglądarce, jak powinna działać układ, gdy zmaga się on z zawartością i wymiarami widocznego obszaru. To bardzo przydatny mechanizm projektowania stron responsywnych.
Siatka
.my-element {
display: grid;
}
Siatka jest pod wieloma względami podobna do flexbox, ale służy do sterowania układami wieloosiowymi, a nie jednoosiowymi (pionowa lub pozioma).
Siatka umożliwia pisanie reguł układu w elemencie z elementem display: grid
i wprowadza kilka nowych podstawowych metod określania stylu układu, np. repeat()
i minmax()
.
Przydatną jednostką siatki jest fr
, czyli odsetek pozostałej przestrzeni. Możesz tworzyć tradycyjne 12-kolumnowe siatki z odstępami między poszczególnymi elementami oraz 3 właściwościami CSS:
.my-element {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}
W tym przykładzie powyżej przedstawiono układ z jedną osią. Flexbox traktuje elementy głównie jako grupę, a siatka zapewnia precyzyjną kontrolę nad ich umiejscowieniem w 2 wymiarach. Możemy określić, że pierwszy element w tej siatce zajmuje 2 wiersze i 3 kolumny:
.my-element :first-child {
grid-row: 1/3;
grid-column: 1/4;
}
Właściwości grid-row
i grid-column
instruują pierwszy element siatki, który rozciąga się od pierwszej kolumny do początku czwartej kolumny, a następnie rozciąga się do trzeciego wiersza od pierwszego wiersza.
Układ przepływu
Jeśli nie używasz siatki i flexboxa, elementy wyświetlają się w zwykły sposób. Istnieje wiele metod układu, które pozwalają dostosować zachowanie i pozycję elementów w normalnym przepływie.
Blok w treści
Pamiętasz, jak sąsiadujące ze sobą elementy nie uwzględniają marginesów bloków i dopełnienia elementu wbudowanego?
Dzięki usłudze inline-block
możesz tego uniknąć.
p span {
display: inline-block;
}
Użycie właściwości inline-block
powoduje wyświetlenie pola o niektórych charakterystycznych cechach elementu na poziomie bloku, ale które wciąż mieści się w tekście.
p span {
margin-top: 0.5rem;
}
Swobodne
Jeśli masz obraz, który mieści się w akapicie tekstu, możnaby go otaczać, jak na przykład na gazecie? Możesz to zrobić za pomocą kreacji pływających.
img {
float: left;
margin-right: 1em;
}
Właściwość float
instruuje element, by „pływał” w określonym kierunku.
Obraz w tym przykładzie ma się unosić w lewo, co pozwala na „otaczanie” go elementami równorzędnymi.
Możesz polecić element pływający left
, right
lub inherit
.
Układ wielokolumnowy
Jeśli masz naprawdę długą listę elementów, np. listę wszystkich krajów, może to powodować duże przewijanie treści i marnowanie czasu. Może też tworzyć nadmierne odstępy na stronie. Wiele kolumn CSS umożliwia podzielenie ich na kilka kolumn, aby rozwiązać oba te problemy.
<h1>All countries</h1>
<ul class="countries">
<li>Argentina</li>
<li>Aland Islands</li>
<li>Albania</li>
<li>Algeria</li>
<li>American Samoa</li>
<li>Andorra</li>
…
</ul>
.countries {
column-count: 2;
column-gap: 1em;
}
Ta długa lista zostanie automatycznie podzielona na 2 kolumny i doda lukę między nimi.
.countries {
width: 100%;
column-width: 260px;
column-gap: 1em;
}
Zamiast podawać liczbę kolumn, na które jest podzielona treść, możesz też określić minimalną wymaganą szerokość za pomocą funkcji column-width
.
Im więcej miejsca w widocznym obszarze, tym więcej kolumn będzie tworzonych automatycznie, a w miarę zmniejszenia miejsca zmniejszy się też ilość kolumn.
Jest to bardzo przydatne w kontekście elastycznego projektowania witryn.
Pozycjonowanie
Na koniec wspomnimy o pozycjonowaniu mechanizmów układów.
Właściwość position
zmienia sposób zachowania elementu w zwykłym przepływie dokumentu oraz jego związek z innymi elementami.
Dostępne opcje to relative
, absolute
, fixed
i sticky
, przy czym domyślna wartość to static
.
.my-element {
position: relative;
top: 10px;
}
Ten element jest przesuwany o 10 pikseli w dół zgodnie z bieżącym położeniem w dokumencie, ponieważ jest ustawiany względem siebie.
Dodanie elementu position: relative
do elementu powoduje też, że będzie on zawierać wszystkie elementy podrzędne z atrybutem position: absolute
.
Oznacza to, że jeśli zostanie zastosowana bezwzględna pozycja elementu nadrzędnego, jego położenie podrzędne zostanie teraz przeniesione do tego konkretnego elementu, a nie do najwyższego względnego elementu nadrzędnego.
.my-element {
position: relative;
width: 100px;
height: 100px;
}
.another-element {
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
}
Jeśli ustawisz position
na absolute
,
element zostanie przerwany w bieżącym przepływie dokumentu.
Oznacza to 2 rzeczy:
- Możesz umieścić ten element w dowolnym miejscu, używając elementów
top
,right
,bottom
ileft
w najbliższym względnym elemencie nadrzędnym. - Cała zawartość otaczająca element bezwzględny przeformatuje się, aby wypełnić pozostałą przestrzeń pozostawioną przez ten element.
Element z wartością position
równą fixed
działa podobnie jak element absolute
, gdzie jego element nadrzędny to główny element <html>
.
Elementy o stałej pozycji pozostają zakotwiczone w lewym górnym rogu na podstawie ustawionych wartości top
, right
, bottom
i left
.
Korzystając z sticky
, możesz uzyskać zakotwiczone, stałe aspekty fixed
i bardziej przewidywalne aspekty związane z uczeniem się przepływu dokumentów w relative
.
Dzięki tej wartości widoczny obszar przewija się poza element i jest zakotwiczony w ustawionych przez Ciebie wartościach top
, right
, bottom
i left
.
Podsumowanie
Układ CSS oferuje szeroki wybór i elastyczność. Aby lepiej poznać możliwości Flexbox i Grid CSS, przejdź do kolejnych modułów.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o układzie graficznym
Do czego służy usługa display
?
inline
, block
lub none
.overflow
.Która właściwość CSS najlepiej sprawdzi się w przypadku umieszczenia wielu akapitów w kolumnach?
display: grid
column-count
display: flex
float
Co to znaczy, że blok nie wypływa?
top
lub left
.position: absolute
jest teraz ustalane ze współrzędnymi x i y na podstawie bloku, a nie na podstawie jego kolejności w porównaniu z innymi elementami równorzędnymi.Flexbox i Grid domyślnie pakują dzieci?
flex-wrap: wrap
lub repeat(auto-fit, 30ch)
.