Flexbox – це дуже крута штука в CSS стилях, покликана суттєво спростити керування блоками. І той, хто її не застосовує – багато втрачає. Далі я розкажу чому та на реальному прикладі покажу, що таке Flexbox, навіщо він та як з ним можна працювати.
Що таке Flexbox?
Flex – це універсальна властивість в CSS (Cascade Style Sheet), яка надає гнучке позиціювання будь-якому блоку: розтягування, стискання, заповнення. Flex також дозволяє маніпулювати послідовністю виводу елементів. Сучасні фронтендщики вибудували цілу технологію на базі властивості flex, яка отримала загальну назву – Flexbox.
Як працює властивість Flex на практиці?
Допустимо така задача: є 4 div-блоки й необхідно змінити їх послідовність на мобільних пристроях.
Спочатку необхідно знайти ці блоки у веб-коді та дослідити їх ієрархію:
<div class="content">
<div id="one" class="block1">1</div>
<div id="two" class="block2">2</div>
<div id="three" class="block3">3</div>
<div id="four" class="block4">4</div>
</div>
Як бачимо, материнським класом для них є “content”, саме йому й потрібно присвоїти властивість flex, щоби застосувати техніку flexbox:
.content {
display: flex;
flex-wrap: wrap;
}
Після цього достатньо просто прописати послідовність виводу елементів із застосуванням властивості order:
.block1 {order:0;}
.block4 {order:1;}
.block2 {order:2;}
.block3 {order:3;}
Чергування ми змінили. Однак, задача полягала застосувати його тільки на мобільних пристроях, а тому використовуємо правило @media:
@media (max-width: 899px){
.block1 {order:0;}
.block4 {order:1;}
.block2 {order:2;}
.block3 {order:3;}
}
Це був лише маленький приклад того, як можна застосувати flexbox на практиці. Рекомендую ознайомитися з ним детальніше на порталі DEV.
