Lekcja 6 Czym jest Flexbox?
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>
<link rel="stylesheet" href="/style.css" type="text/css"/>
</head>
<body>
<div class="container"> - nasz kontener
<div>1</div>
<div>2</div> - Elementy z którymi będziemy pracować
<div>3</div>
</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;
}
Flex-start - Wartość flex-start sprawi, że elementy zostaną wyrównane do początku kontenera(lewy górny róg).
.container {
display: flex;
justify-content: flex-start;
}
Flex-end - Wartość flex-end sprawi, że elementy zostaną wyrównane do końca kontenera(prawy górny róg).
.container {
display: flex;
justify-content: flex-end;
}
Space-between - Wartość space-between sprawi, że obiekty zostaną rozmieszczone z równymi odstępami między sobą.
.container {
display: flex;
justify-content: Space-between;
}
align-items
Właściwość align-items służy wyrównaniu obiektów flex. To prawie to samo, co justify-content, ale zamiast poziomo działamy poziomo.
Pokaże teraz wam przykład, który wyśrodkowuje elementy potomne w pionie wewnątrz kontenera:
container {
display: flex;
align-items: center;
height: 300px;
background-color: blue;
}
.container div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
Porządany efekt:
Jak widzimy Elementy wyśrodkowały do pionu a nie poziomu
(ang.Cascading style sheets)
MOJE NOTATKI
