Lekcja 6 - Flex Box

1

Wszystkich Świętych

Dzień zadumy i przemyślenia...co w życiu jest ważne?!?

Data : 2024-11-01

11

Święto Niepodległości

Narodowe Święto Niepodległości – święto państwowe w Polsce obchodzone corocznie 11 listopada dla upamiętnienia odzyskania przez

Data : 2024-11-11

29

Andrzejki

Andrzejki – wieczór wróżb odprawianych w nocy z 29 na 30 listopada, w wigilię świętego Andrzeja, patrona Szkocji, Grecji i Rosji.

Data : 2024-11-29

Szczegóły: Odsłony: 15915

Czym jest Flexbox

Flexbox - to metoda która ułatwia wyrównywanie elementów na naszej stronie

Aby zaczać korzystać z Flexbox, należy wpierw zdefiniować element, który stanie się kontenerem obejmującym wszystkie elementy zawarte w <div>. By najlepiej zobrazować możliwości Flexbox, stworze przy okazji kilka elementów które będziemy przemieszczać.

<html>

<head>

</head>

<body>

<div class="container"> - nasz kontener

<div>2</div> - Elementy z którymi będziemy pracować

</div>

</body>

</html>

W częsci CSS należy dodać display: flex; by nasz kontener stał się elastyczny

container {

display: flex;

background-color: blue;

}

.container div{ - w tej częsci nadamy naszym wygląd elementom

background-color: #f1f1f1; - Kolor tła elementu (biały)

margin: 10px; - odległość elementu od krańca. (tego niebieskiego kwadratu)

padding: 20px; - wielkość naszego białego kwadratu

font-size: 30px; - wielkość czcionki

}

Porządany efekt:

Teraz przedstawie ci kilka przykładowych własciwości do manipulacji obiektami objętymi Flexbox.

flex-direction
flex-wrap
justify-content
align-items

Flex-direction

Właściwość Flex-direction definiuje, w którym kierunku ułożyć elementy potomne. Dostępne wartości to column lub row. Poniższy przykład ustawia Flex-direction na column (od góry do dołu). W rezultacie, elementy potomne wewnątrz kontenera div będą formowały linię pionową.

Przykład z użyciem Flex-direction: column;

Zależy nam by elementy potomne ustawiły się w linię pionową

.container {

display: flex;

flex-direction: column;

background-color: blue;

}

.container > div {

background-color: #f1f1f1;

width: 100px;

margin: 10px;

text-align: center;

line-height: 75px;

font-size: 30px;

}

Porządany efekt:

Przykład z użyciem Flex-direction: row;

Jeżeli chcemy by elementy ustawiły sie w poziomie to jedyne co zmienimy jest column na row.

container {

display: flex;

flex-direction: row; - zmieniamy column na row

background-color: blue;

}

.container > div {

background-color: #f1f1f1;

width: 100px;

margin: 10px;

text-align: center;

line-height: 75px;

font-size: 30px;

}

Porządany efekt:

Flex-Wrap

Właściwość Flex-Wrap określa, czy elementy wewnątrz mają być zawijane, czy nie. Poniższy przykład będzie miał 12 obiektów by najlepiej pokazać zdolności tej właściwości.

.container {

display: flex;

flex-wrap: wrap; - ustawiamy flex-wrap na wrap. Jeżeli nie chcemy by elementy sie zwijały to zamiast wrap dajemy nowrap

background-color: blue;

}

.container div {

background-color: #f1f1f1;

width: 100px;

margin: 10px;

text-align: center;

line-height: 75px;

font-size: 30px;

}

Porządany efekt:

Justify-content

Właściwości justify-content używa się do wyrównania elementów wewnątrz flex. Możesz przekazać tej właściwości takie wartości, jak center, flex-start, flex-end, space-between itd.

Center -Wartość center zgrupuje wszystkie elementy na środku kontenera.

.container {

display: flex;

justify-content: center;

}