3.1 Flexbox
Tworzenie elastycznych układów za pomocą Flexbox i Grid to kluczowa technika przy tworzeniu nowoczesnych responsywnych stron internetowych. Te technologie ułatwiają zarządzanie rozmieszczeniem elementów na stronie, zapewniając ich dostosowanie do różnych rozmiarów ekranów i urządzeń.
Flexbox (Flexible Box Layout Module) jest przeznaczony do jednowymiarowego rozmieszczania elementów (albo w wierszach, albo w kolumnach). Flexbox upraszcza tworzenie elastycznych i responsywnych układów.
Podstawowe koncepcje Flexbox:
- Flex-kontener: element, do którego zastosowano właściwość
display: flex - Flex-elementy: elementy podrzędne flex-kontenera, które są wewnątrz niego rozmieszczone
Właściwości Flexbox
Flex-kontener:
display: flex: określa element jako flex-kontenerflex-direction: ustawia kierunek ułożenia flex-elementów (row,column,row-reverse,column-reverse)justify-content: zarządza wyrównaniem flex-elementów względem głównej osi (flex-start,flex-end,center,space-between,space-around)align-items: zarządza wyrównaniem flex-elementów względem osi poprzecznej (stretch,flex-start,flex-end,center,baseline)
Flex-elementy:
flex-grow: określa, czy element ma się powiększać, gdy jest wolne miejsceflex-shrink: określa, czy element ma się pomniejszać, gdy brakuje miejscaflex-basis: ustawia początkowy rozmiar elementu przed rozdysponowaniem wolnego miejscaalign-self: nadpisuje wyrównanie elementu względem osi poprzecznej, ustawione walign-items
Przykład użycia Flexbox
Stworzymy układ z trzema kolumnami, który dostosuje się do różnych rozmiarów ekranu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Kolumna 1</div>
<div class="flex-item">Kolumna 2</div>
<div class="flex-item">Kolumna 3</div>
</div>
</body>
</html>
Wyjaśnienie kodu:
-
.flex-container: określa kontener jako flex-kontener, wyrównuje elementy z równymi odstępami między nimi i pozwala elementom przenosić się do kolejnego wiersza, gdy brakuje miejsca -
.flex-item: flex-elementy, które zajmują równą przestrzeń, mają minimalną szerokość 200px i równomiernie rozmieszczone wewnątrz kontenera
3.2 CSS Grid
CSS Grid Layout to dwuwymiarowy system układania, który pozwala na tworzenie skomplikowanych układów z użyciem wierszy i kolumn.
Podstawowe koncepcje CSS Grid:
- Grid-kontener: element, do którego zastosowano właściwość
display: grid - Grid-elementy: elementy podrzędne grid-kontenera, które są rozmieszczone w siatce
Właściwości CSS Grid
Grid-kontener:
display: grid: określa element jako grid-kontenergrid-template-columns: ustawia liczbę i rozmiary kolumn w siatcegrid-template-rows: ustawia liczbę i rozmiary wierszy w siatcegap: zarządza odstępami między wierszami i kolumnamijustify-items: zarządza poziomym wyrównaniem grid-elementówalign-items: zarządza pionowym wyrównaniem grid-elementów
grid-column: określa, na ile kolumn element się rozciągagrid-row: określa, na ile wierszy element się rozciągajustify-self: nadpisuje poziome wyrównanie elementualign-self: nadpisuje pionowe wyrównanie elementu
Grid-elementy:
Przykład użycia CSS Grid
Stworzymy układ z trzema kolumnami i dwoma wierszami, który dostosuje się do różnych rozmiarów ekranu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Element 1</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
<div class="grid-item">Element 4</div>
<div class="grid-item">Element 5</div>
<div class="grid-item">Element 6</div>
</div>
</body>
</html>
Wyjaśnienie kodu:
.grid-container: określa kontener jako grid-kontener z trzema kolumnami i dwoma wierszami, każdy element zajmuje równą przestrzeń.grid-item: grid-elementy z równymi odstępami i tłem
GO TO FULL VERSION