CSS · lekcja 10

Obok siebie: float dawniej, flexbox dziś

Na poprzedniej lekcji wyjmowaliście element z normalnego przepływu właściwością position. Dziś uczymy się ustawiać elementy obok siebie w rzędzie - starą techniką (float) i dzisiejszą (flexbox).

float i clear - dawny sposób na kolumny obok siebie
display: flex - kontener i jego elementy, oś główna i oś poprzeczna
justify-content i align-items - rozkładanie elementów na obu osiach
flex-wrap i gap - zawijanie do kolejnego rzędu i odstępy

Rozgrzewka · 3 minuty

Trzy pytania z poprzedniej lekcji

Czym różni się position: relative od position: static?
Względem którego elementu pozycjonuje się position: absolute, jeśli jego rodzic ma position: relative?
Który element strony najczęściej dostaje position: fixed lub sticky i dlaczego?

Część 1 · float dawniej

Kolumna tekstu opływająca obrazek

float wyjmuje element z normalnego przepływu i przykleja go do lewej albo prawej krawędzi rodzica. Treść, która normalnie stałaby pod nim, teraz opływa go z drugiej strony - dokładnie tak, jak zdjęcie w gazecie otoczone tekstem. Element z regułą clear czeka, aż skończy się opływanie, i dopiero wtedy staje pod spodem, na pełnej szerokości.

MDN: „The float property was introduced to allow web developers to implement layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it” · „If we want to stop the following element from moving up, we need to clear it; this is achieved with the clear property” · „Using floats [for whole-page layouts] should be regarded as a legacy technique” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Floats

Część 2 · flexbox: kontener i osie

Kontener i dwie osie

display: flex zamienia element w kontener flex, a jego bezpośrednie dzieci - w elementy flex. Kontener ma dwie osie: oś główną (kierunek, w którym ustawiają się elementy) i oś poprzeczną, prostopadłą do niej.

Ciekawostka z Wikipedii: flexbox nie powstał od zera dla stron WWW. Wzorował się na XUL, wewnętrznym narzędziu Mozilli, którym sam Firefox układał swoje okna i paski narzędzi. W3C zaczęło pisać z tego pomysłu specyfikację CSS 23 lipca 2009 roku.

MDN: „Adding a display value of flex to an element makes it a flex container... its children are converted to (and laid out as) flex items” · „The main axis is the axis running in the direction the flex items are laid out in” · „The cross axis is the axis running perpendicular to the direction the flex items are laid out in” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Flexbox · ciekawostka: en.wikipedia.org/wiki/CSS_Flexible_Box_Layout

Część 3 · justify-content

Rozkładanie na osi głównej

justify-content decyduje, gdzie na osi głównej stoją elementy flex. flex-start (wartość domyślna) trzyma je przy początku, center stawia na środku, a space-between rozkłada je równo, bez odstępu na krawędziach kontenera.

.container { display: flex; justify-content: center; }

MDN: „justify-content controls where the flex items sit on the main axis. The default value is normal, which behaves as start” · „center is also a value for justify-content. It'll make the flex items sit in the center of the main axis” · „space-between... is very similar to space-around except that it doesn't leave any space at either end” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Flexbox

Część 4 · align-items, flex-wrap, gap

Wysokość, zawijanie i odstępy

align-items ustawia elementy na osi poprzecznej - domyślnie stretch rozciąga je do wysokości najwyższego, center wyśrodkowuje je na tej osi. flex-wrap: wrap pozwala elementom, które się nie mieszczą w jednym rzędzie, przejść do kolejnego. gap ustawia odstęp między elementami - jedna deklaracja na kontenerze zamiast marginesu na każdym elemencie z osobna.

.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

MDN: „The align-items property controls where the flex items sit on the cross axis... By default the value normal... behaves as stretch” · „section { flex-wrap: wrap; }... Any overflow is moved down to the next line” · „The gap CSS shorthand property sets the gaps (also called gutters) between rows and columns on... flex... containers” · developer.mozilla.org/docs/Learn_web_development/Core/CSS_layout/Flexbox · developer.mozilla.org/docs/Web/CSS/gap

CSS · egzamin

Tak pytają na egzaminie

1. W języku CSS przypisano regułę float: left; dla bloku. Reguła ta zostanie wykorzystana do

wyrównania tekstu do lewej strony.
ustawienia bloków jeden pod drugim.
ustawienia bloku na lewo względem innych.
wyrównania elementów tabeli do lewej strony.

2. Pięć bloków (#drugi…#piaty) ma stanąć: BLOK 2 z lewej (40%), BLOK 3 obok niego (30%), BLOK 4 z prawej (30%), BLOK 5 pod spodem na pełnej szerokości. Który kod to ustawia?

	Kod 1	Kod 2	Kod 3	Kod 4
#trzeci	float: left	float: left	float: left	width: 30%
#czwarty	float: right	float: right	width: 30%	width: 30%
#piaty	clear: both	float: left	float: right	float: right

CKE, E.14, styczeń 2020, zadanie 9 · CKE, EE.09, czerwiec 2021, zadanie 26 (#drugi we wszystkich kodach: float: left; width: 40%)

Ćwiczenie · przy komputerze · 20 minut

Ćwiczenie: flexbox w sekcji „o mnie”

Znajdź w swojej witrynie sekcję „o mnie” ze zdjęciem i opisem - to dwa elementy w jednym wspólnym kontenerze (np. <div class="about">).
W style.css dodaj temu kontenerowi display: flex, align-items: center i gap (np. 20px), żeby zdjęcie i opis stanęły obok siebie z równym odstępem.
Zapisz, F5, sprawdź w przeglądarce. Commit „Flexbox”, Push.

Pamiętajcie: display: flex ustawia się na kontenerze (rodzicu) - to jego bezpośrednie dzieci stają się elementami flex, nie sam kontener.

Pytania kontrolne

Trzy pytania na koniec

Do czego dziś służy float, skoro do kolumn obok siebie już się go nie używa?
Co to jest oś główna, a co oś poprzeczna kontenera flex?
Do czego służy gap i czym różni się od ustawiania margin na każdym elemencie z osobna?

To tyle na dziś: temat kontroli położenia elementów zamknięty. Na następnej lekcji: obrazy w tle i dopasowanie zdjęć.

Rozkład: Kontrola położenia elementów 2/2 → CSS - Obrazy

Z realnych wdrożeń

A jak to wygląda w produkcji?

Na lekcji	W produkcji	Status
`float: left`/`right` do ustawiania kolumn obok siebie	Flexbox (i CSS Grid) do układów wielokolumnowych - `float` wraca do swojej pierwotnej roli: obrazek otoczony tekstem	zastąpione
Ręczne liczenie szerokości każdej kolumny w procentach	`flex: 1` (albo `flex-grow`) rozkłada dostępne miejsce między elementami automatycznie	nadal w użyciu
Odstęp między elementami przez `margin` na każdym z osobna	`gap` na kontenerze - jedna deklaracja zamiast marginesu z każdej strony każdego elementu	nadal w użyciu
`clear: both` jako sposób na „naprawienie” układu po floatach	W layoutach flex i grid element nie „ucieka” w górę - `clear` w ogóle nie jest tam potrzebny	przestarzałe

MDN: „Using floats [for whole-page layouts] should be regarded as a legacy technique”