Короткий вступ до популярного модуля компонування
У цьому дописі ви дізнаєтеся основи 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 - найпростішого способу навчитися кодувати. Якщо ви хочете навчитися будувати сучасний веб-сайт на професійному рівні, вам слід ознайомитися з нашим адаптивним веб-дизайном веб-дизайну.
