W flexbox wyglądem i zachowaniem elementów elementów na stronie można manipulować dzięki różnym parametrom. Odpowiadają one za ułożenie oraz zachowanie konkretnych elementów na stronie. Zalicza się do nich:
- 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