Układ

Podcast CSS – 009: Układ .

Wyobraź sobie, że pracujesz jako programista, a współpracownik projektanta podaje projekt zupełnie nowej strony. Projekt zawiera różne ciekawe układy i kompozycje: dwuwymiarowych układów uwzględniających szerokość i wysokość widocznego obszaru, a także układy, które muszą być elastyczne i elastyczne. Jak wybrać najlepsze style ich za pomocą CSS?

CSS pozwala nam rozwiązywać problemy z układami na różne sposoby, na osi poziomej i pionowej, a nawet na obu tych osiach. Dobór odpowiedniej metody układu do kontekstu może być trudny, a często do rozwiązania problemu możesz potrzebować więcej niż jednej metody układu. Aby Ci w tym pomóc, w kolejnych modułach omówimy poznasz unikalne cechy każdego mechanizmu układu CSS, by podjąć właściwe decyzje.

Układ: krótka historia

W początkach internetu bardziej złożonych projektów niż prosty dokument utworzono za pomocą elementów <table>. Oddzielenie HTML od stylów wizualnych było łatwiejsze, gdy w późniejszych latach 90. powszechnie zastosowaliśmy CSS w przeglądarkach. Dzięki CSS deweloperzy mogą całkowicie zmienić wygląd i sposób działania swojej witryny bez konieczności korzystania z kodu HTML. Te nowe projekty inspirowane możliwościami, takie jak The CSS Zen Garden, którą stworzyliśmy po to, by zademonstrować możliwości CSS i zachęcić kolejnych programistów do jego poznawania.

Styl CSS ewoluował w miarę ewoluowania naszych potrzeb w zakresie projektowania stron internetowych i technologii przeglądarek. Przekonajcie się, jak z biegiem czasu zmieniały się układy CSS i nasze podejście do układu tym artykułem Rachel Andrew.

Układ: teraźniejszość i przyszłość

Współczesny arkusz CSS ma wyjątkowo zaawansowane narzędzia układu. Mamy specjalne systemy do układów i ogólnie przyjrzymy się temu, co mamy do dyspozycji. przed bardziej szczegółowymi informacjami o funkcjach Flexbox i Grid w kolejnych modułach.

Informacje o właściwości display

Właściwość display wykonuje 2 czynności. Najpierw określa, czy pole, do którego został zastosowany, działa jako wbudowane czy blokowe.

.my-element {
  display: inline;
}

Elementy wbudowane zachowują się jak słowa w zdaniu. Znajdują się obok siebie w kierunku wbudowanym. Elementy takie jak <span> i <strong>, które zwykle służą do stylizowania fragmentów tekstu w obrębie elementów takich jak <p> (akapit), są domyślnie wbudowane. Zachowują również otaczającą go białą przestrzeń.

W elementach wbudowanych nie możesz ustawić konkretnej szerokości i wysokości. Każdy margines i dopełnienie na poziomie bloku będą ignorowane przez otaczające go elementy.

.my-element {
    display: block;
}

Elementy blokowe nie znajdują się obok siebie. Tworzy nowy wiersz dla siebie. O ile nie zostało to zmienione przez inny kod CSS, blokowy element rozwinie się do rozmiaru wymiaru wbudowanego, więc w trybie pisania poziomego rozciąga się na całą szerokość. Marginesy ze wszystkich stron bryłowego elementu są przestrzegane.

.my-element {
    display: flex;
}

Właściwość display określa też, jak powinny zachowywać się elementy podrzędne elementu. Przykład: ustawienie właściwości display na display: flex powoduje, że pole jest blokiem na poziomie bloku, a także przekształca swoje elementy podrzędne w elementy elastyczne. Umożliwia to korzystanie z właściwości elastycznych, które kontrolują wyrównanie, kolejność i przepływ.

Flexbox i siatka

Istnieją 2 główne mechanizmy układu, które tworzą reguły układu dla wielu elementów: flexbox i siatka. Są to podobne elementy, ale zaprojektowane z myślą o rozwiązaniu różnych problemów z układem strony.

Urządzenie Flexbox

.my-element {
    display: flex;
}

Flexbox to mechanizm układów jednowymiarowych. układ na jednej osi, poziomo lub pionowo. Domyślnie flexbox wyrównuje elementy podrzędne elementu obok siebie, w kierunku wbudowanym, i rozciągnij je w kierunku bryły, aby miały tę samą wysokość.

Elementy pozostają na tej samej osi i nie zawijają się, gdy skończy się miejsce. Zamiast tego będą próbowały się zmieścić w jednym wierszu. To zachowanie 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 dotyczące ich zachowania w kontenerze elastycznym. Możesz zmienić wyrównanie, kolejność i uzasadnienie każdego elementu. Możesz też zmienić sposób, w jaki rozmiar się zmniejsza lub rośnie, za pomocą właściwości flex.

.my-element div {
    flex: 1 0 auto;
}

Właściwość flex to skrót od flex-grow, flex-shrink i flex-basis. Przykład powyżej możesz rozwinąć w ten sposób:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

Deweloperzy podają te zasady niskiego poziomu, aby wskazać przeglądarce, jak powinien zachowywać się układ gdy zmagają się z nią wymiary treści i widocznego obszaru. Jest to bardzo przydatny mechanizm elastycznego projektowania witryn.

Siatka

.my-element {
    display: grid;
}

Pod wieloma względami siatka jest podobna do flexbox. ale ma umożliwiać sterowanie układami wieloosiowymi zamiast jednoosiowymi (odstępami pionowymi lub poziomymi).

Siatka umożliwia wpisanie reguł układu dla elementu, który ma atrybut display: grid, i wprowadza kilka nowych podstawowych elementów stylu układu, takich jak repeat() i minmax(). Jedną z przydatnych jednostek siatki jest jednostka fr – czyli ułamek pozostałej przestrzeni – możesz zbudować tradycyjne 12-kolumnowe siatki, z luką między każdym elementem i 3 właściwościami CSS:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

Powyższy przykład przedstawia układ z 1 osią. gdzie Flexbox traktuje głównie produkty jako grupę, zapewnia precyzyjną kontrolę nad ich rozmieszczeniem w dwóch wymiarach. Możemy zdefiniować, ż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 informują, że pierwszy element siatki ma się rozciągać do początku czwartej kolumny, od pierwszej kolumny, a następnie rozciąga się do trzeciego wiersza od pierwszego wiersza.

Układ przepływu

Jeśli nie używasz siatki ani Flexbox, elementy wyświetlają się w normalny sposób. Istnieje wiele metod układu, za pomocą których możesz dostosować działanie i pozycję elementów w normalnym przepływie.

Blok wbudowany

Pamiętasz, że otaczające elementy nie respektują marginesu bloku i dopełnienia elementu wbudowanego. Dzięki funkcji inline-block możesz spowodować, że tak się stanie.

p span {
    display: inline-block;
}

Użycie inline-block daje pole, które ma cechy elementu na poziomie bloku, ale wciąż wkomponuje się w tekst.

p span {
    margin-top: 0.5rem;
}

Swobodne

Jeśli masz obraz znajdujący się w akapicie tekstu, wyobraź sobie, że tekst lepiej owinąć obraz tak, jak widać go w gazecie? Możesz to zrobić za pomocą liczb zmiennoprzecinkowych.

img {
    float: left;
    margin-right: 1em;
}

Właściwość float instruuje element jako „float” w określonym kierunku. Obraz z tego przykładu ma unosić się w lewo, który umożliwia „zawijanie” elementów równorzędnych wokół nas. Możesz polecić elementowi pływanie w trybie left, right lub inherit.

Układ wielokolumnowy

Jeśli masz naprawdę długą listę elementów, np. listę wszystkich krajów na świecie, może to dużoprzewijać i marnować czas. Może to też spowodować utworzenie nadmiarowej pustej przestrzeni na stronie. Dzięki wielu kolumnom CSS możesz podzielić go 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;
}

Spowoduje to automatyczne rozdzielanie tej długiej listy na 2 kolumny i dodanie między nimi przerwy.

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

Zamiast ustawiać liczbę kolumn, na które treści są dzielone, możesz też określić minimalną szerokość, używając funkcji column-width. Im więcej miejsca w widocznym obszarze, automatycznie utworzymy więcej kolumn, a wraz ze zmniejszeniem miejsca zmniejszą też liczbę kolumn. Jest to bardzo przydatne w kontekście projektowania responsywnego.

Pozycjonowanie

Ostatnią częścią tego omówienia mechanizmów układu jest pozycjonowanie. Właściwość position zmienia sposób zachowania elementu w zwykłym przepływie dokumentu, i jego powiązania z innymi elementami. Dostępne opcje to relative, absolute, fixed i sticky. Wartością domyślną jest static.

.my-element {
  position: relative;
  top: 10px;
}

Ten element został przesuwany o 10 pikseli w dół w zależności od jego bieżącej pozycji w dokumencie. względem siebie. Dodanie do elementu elementu position: relative sprawia, że staje się on również blokiem wszystkich elementów podrzędnych z atrybutem position: absolute. Oznacza to, że jego element podrzędny zostanie przeniesiony do tego konkretnego elementu, zamiast w stosunku do najwyższego najwyższego względnego elementu nadrzędnego, gdy zastosowano do niego pozycję bezwzględną.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

Gdy ustawisz position na absolute, powoduje to wyjęcie elementu z bieżącego przepływu dokumentów. Oznacza to 2 rzeczy:

1. Możesz umieścić ten element w dowolnym miejscu, używając atrybutów top, right, bottom i left w najbliższym względnym elemencie nadrzędnym.
2. Cała zawartość otaczająca element bezwzględny zmienia układ, aby wypełnić pozostałą przestrzeń pozostawioną przez ten element.

Element o wartości position o wartości fixed działa podobnie jak absolute, gdzie element nadrzędny jest elementem głównym <html>. Elementy o stałej pozycji są zakotwiczone od lewego górnego rogu na podstawie ustawionych wartości top, right, bottom i left.

Możesz osiągnąć zakotwiczony, Naprawiono aspekty funkcji fixed i bardziej przewidywalne aspekty procesu relative, które polegają na używaniu sticky. Przy tej wartości, gdy widoczny obszar przewija się poza element, Pozostanie on zakotwiczony do ustawionych przez Ciebie wartości top, right, bottom i left.

Podsumowanie

Układ CSS zapewnia duży wybór i elastyczność. Aby dowiedzieć się więcej o możliwościach Flexbox i Grid CSS, przejdź do kolejnych modułów.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o układzie