Короткий вступ до популярного модуля компонування
У цьому дописі ви дізнаєтеся основи CSS Flexbox, який за останні пару років став необхідним навиком веб-розробників та дизайнерів.
Для прикладу ми використаємо панель навігації, оскільки це дуже типовий варіант використання для Flexbox. Це познайомить вас з найбільш часто використовуваними властивостями модуля, залишаючи ті, що не є настільки критичними.
Я також створив безкоштовний 12-частинний курс на Flexbox. Перевірте тут, якщо вам цікаво!
Тепер давайте почнемо!
Ваш перший макет Flexbox
Двома основними компонентами макета Flexbox є контейнер та елементи .
Ось HTML для нашого прикладу, який містить контейнер із трьома елементами:
Home Search Logout
Перш ніж перетворити це на макет Flexbox, елементи будуть складені один на одного наступним чином:

Я додав трохи стилю, але це не має нічого спільного з Flexbox.
Щоб перетворити це на макет Flexbox, ми просто надамо контейнеру таку властивість CSS:
.container { display: flex; }
Це автоматично позиціонує елементи красиво вздовж горизонтальної осі.

Якщо ви хочете перевірити фактичний код, ви можете перейти до цього ігрового майданчика Скрімба.
А тепер давайте трохи перетасуємо ці предмети.
Обґрунтуйте вміст та вирівняйте елементи
Justify-content та align-items - це дві властивості CSS, які допомагають нам розподіляти елементи в контейнері. Вони контролюють розташування предметів вздовж головної та поперечної осей .
У нашому випадку (але не завжди) головна вісь горизонтальна, а поперечна вісь вертикальна:

У цій статті ми розглянемо лише те justify-content
, як я виявив, що використовую цю набагато більше align-items
. Однак у своєму курсі Flexbox я детально пояснюю обидві властивості.
Давайте відцентруємо всі елементи вздовж головної осі , використовуючи justify-content
:
.container { display: flex; justify-content: center; }

Або ми можемо встановити для цього значення space-between
, яке додасть простір між елементами, наприклад:
.container { display: flex; justify-content: space-between; }

Ось значення, які ви можете встановити justify-content:
- flex-start ( за замовчуванням )
- гнучкий кінець
- центр
- простір-між
- простір-навколо
- просторово-рівномірно
Я рекомендую вам пограти з ними і подивитися, як вони розігруються на сторінці. Це має дати вам належне розуміння концепції.
Керування окремим елементом
Ми також можемо контролювати окремі предмети . Скажімо, ми, наприклад, хочемо зберегти перші два елементи з лівого боку, але перемістіть logout
кнопку в праву сторону.
Для цього ми використаємо стару добру техніку встановлення поля auto
.
.logout { margin-left: auto; }

Якщо ми хочемо, щоб і search
елемент, і logout
елемент були переміщені в праву сторону, ми просто додамо елемент margin-left
до цього search
елемента.
.search { margin-left: auto; }
Він відсуне елемент пошуку якнайдалі праворуч, що знову виштовхне елемент виходу з ним:

Властивість flex
Наразі у нас були лише елементи фіксованої ширини. Але що, якщо ми хочемо, щоб вони реагували? Для досягнення цього ми маємо властивість під назвою flex
. Це набагато простіше, ніж колишній спосіб використання відсотків.
Ми просто націлимо всі елементи і надамо їм flex
значення 1
.
.container > div { flex: 1; }

Як бачите, він розтягує елементи, щоб заповнити весь контейнер.
У багатьох випадках ви, мабуть, хотіли б, щоб один із елементів зайняв зайву ширину, і тим самим лише встановив, щоб один із них мав гнучку ширину. Наприклад, ми можемо змусити search
предмет займати весь зайвий простір:
.search { flex: 1; }

Перш ніж ми закінчимо цю статтю, я хочу зазначити, що властивість flex насправді є скороченням трьох властивостей: flex-grow , flex-shrink і flex-basis . Однак їх вивчення займає більше п’яти хвилин, тож це виходить за рамки цього посібника.
Однак якщо ви зацікавлені в їх вивченні, я детально поясню всі три властивості у своєму безкоштовному курсі Flexbox.
Тепер, коли ви вивчили ази, ви точно будете готові пройти мій повний курс і стати майстром Flexbox!
Дякуємо за читання! Мене звуть Пер Борген, я співзасновник Scrimba - найпростішого способу навчитися кодувати. Якщо ви хочете навчитися будувати сучасний веб-сайт на професійному рівні, вам слід ознайомитися з нашим адаптивним веб-дизайном веб-дизайну.
