НОВОСТИ

Flexbox в CSS на реальному прикладі

Что такое flex в CSS

Flexbox – це дуже крута штука в CSS стилях, покликана суттєво спростити керування блоками. І той, хто її не застосовує – багато втрачає. Далі я розкажу чому та на реальному прикладі покажу, що таке Flexbox, навіщо він та як з ним можна працювати.

Що таке Flexbox?

Flex – це універсальна властивість в CSS (Cascade Style Sheet), яка надає гнучке позиціювання будь-якому блоку: розтягування, стискання, заповнення. Flex також дозволяє маніпулювати послідовністю виводу елементів. Сучасні фронтендщики вибудували цілу технологію на базі властивості flex, яка отримала загальну назву – Flexbox.

Flexbox в CSS на реальному прикладі

Як працює властивість Flex на практиці?

Допустимо така задача:  є 4 div-блоки й необхідно змінити їх послідовність на мобільних пристроях.

Flexbox в CSS на реальному прикладі

Спочатку необхідно знайти ці блоки у веб-коді та дослідити їх ієрархію:

<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;}

Пример CSS свойства flex

Чергування ми змінили. Однак, задача полягала застосувати його тільки на мобільних пристроях, а тому використовуємо правило @media:

@media (max-width: 899px){
.block1 {order:0;}
.block4 {order:1;}
.block2 {order:2;}
.block3 {order:3;}
}

Це був лише маленький приклад того, як можна застосувати flexbox на практиці. Рекомендую ознайомитися з ним детальніше на порталі DEV.

Оценка:
( 2 оцінки, середнє 5 з 5 )
Подписка на KRASHENININ.TECH

Получайте регулярные обновления на почту!


Виталий Крашенинин/ автор статті
Не забудьте поделиться материалом в соцсетях:
Krasheninin.tech - блог про веб-технології, і не тільки
Подписаться
Уведомление о
guest
0 Комментарий
Встроенные отзывы
Просмотреть все комментарии
0
Есть мысли? Прокомментируй!x
()
x
Read previous post:
как в css переопределить стили глобально
Як глобально перевизначити CSS стилі: селектори, класи, ідентифікатори

У даній статті я повім про базову структуру CSS, познайомлю новачків із фундаментальними поняттями та навчу як правильно глобально перевизначати...

Close