Z pomocą Flexbox możemy manipulować położeniem różnych elementów w obrębie witryny internetowej. Odchodzimy więc od standardowego modelu pudełka i przechodzimy na technologię flex. Gdzie kolumny się rozciągają, wyciagają, zmieniają swoje położenie (podczas wyświetlania), dostosowują do sąsiednich.
Technologia CSS Flexbox jest odpowiedzią na tworzenie nowoczesnych nie ograniczonych stron. Do jej podstawowych parametrów zalicza się właściwości CSS takie jak:
- flex
- order
- flex-grow
- flex-shrink
- flex-basis
- align-self
- flex-direction
- justify-content
Podstawowe użycie Flexbox
Każda witryna internetowa posiada przynajmniej jedną, dwie lub trzy kolumny umieszczone obok siebie. W tradycyjnej metodzie blokowej aby umieścić takie kolumny obok siebie musimy nadać im odpowiednią szerokość oraz ustawić odpowiednio właściwość float (nie nie podam parametrów).
W kodzie HTML różnica w wyglądzie między metodami jak widać nie istnieje – w taki sam sposób dodawali byśmy elementy w metodzie blokowej.
<div class="flex-container"> <div>kol 1</div> <div>kol 2</div> <div>kol 3</div> </div>
Różnice pojawiają się dopiero w strukturze kodu CSS.
.flex-container {
display: flex;
background-color: darkblue;
}
.flex-container div {
background-color: #ccc;
margin: 10px;
padding:20px;
font-size: 30px;
}
Efekt:
Kluczowym elementem w tym przykładzie jest ustawienie: display: flex;
To dzięki niemu elementy zyskują nowe ciekawe właściwości.
Jeśli nie do końca rozumiecie działanie tej właściwości możecie ją przetestować z pomocą poniższego Generatora. Link do niego podesłał mi jeden z czytelników bloga – Foltas Folti
źródło:
https://www.w3schools.com/css/css3_flexbox.asp#order
https://webroad.pl/html5-css3/2466-css3-flexbox-podstawowe-zalozenia
https://eduweb.pl/live/poznaj-css-flexbox
Dodatkowe tagi:
CSS Flexible Box Layout Module