Остаточний посібник з Flexbox - Навчання на прикладах

Програмування

Який найкращий спосіб зрозуміти Flexbox ? Вивчіть основи, а потім побудуйте багато речей. І саме це ми і зробимо в цій статті.

Зазначимо кілька речей

  • Ця стаття написана з урахуванням проміжних розробників і передбачає, що ви вже трохи знаєте про Flexbox. Але ...
  • Якщо ви знаєте якийсь CSS, але зовсім не знаєте Flexbox, я написав тут вичерпний посібник (безкоштовна стаття, 46 хвилин читання).
  • І якщо ви не дуже добре знаєте CSS, рекомендую пройти повне (практичне) введення в CSS (платний курс із 74 уроками).
  • Вам не потрібно наслідувати приклади з цієї статті в порядку, вказаному тут.
  • Flexbox - це лише техніка верстки. Реальні проекти вимагають не лише макетів.
  • Коли ви бачите таке позначення, як div.ohansвоно посилається на div з іменем класуohans

Приклад 1: Як створити фотогалерею за допомогою Flexbox

Зробити фотографії в рядках і стовпцях за допомогою Flexbox простіше, ніж сприймає більшість людей.

Розглянемо просту розмітку, наприклад:

У нас є 10 зображень у межах main.gallery.

Припустимо, що main.galleryстилістика була покрита доступним екраном.

.gallery { min-height: 100vh}

Коротка примітка про зображення

За замовчуванням зображення є inline-blockелементами. Вони мають ширину і висоту. Вони залишатимуться на лінії, за винятком випадків, коли обмежено розміром, наприклад, якщо зображення занадто великі, щоб поміститися на лінії.

Точка відліку

Поклавши все разом, результат усіх розміток і стилів, наведених вище, такий:

Тепер виведіть Flexbox на сцену:

.gallery { display: flex }

На даний момент поведінка зображень за замовчуванням змінилася. Вони переходять від буття inline-blockелементів до буттяflex-items.

В результаті контексту Flexbox, ініційованого всередині .gallery, зображення тепер будуть стиснуті до одного рядка. Плюс, вони розтягнулися б по вертикалі так:

Це результат поведінки Flexbox за замовчуванням:

  1. Зменшіть усі дочірні елементи в один рядок. Не загортайте елементи.

Це погано для галереї, тому ми змінюємо цю поведінку так:

.gallery { flex-wrap: wrap}

Тепер це оберне елементи та розбиє їх на кілька рядків, коли це доречно.

2. Зображення тепер переносяться на наступний рядок. Але вони все одно тягнуться вздовж вертикалі. Ми точно не хочемо такої поведінки, оскільки вона спотворює зображення.

Ця stretchповедінка зумовлена ​​типовим align-itemsзначенням для flexконтейнерів.

align-items: stretch

Давайте змінимо це:

.gallery { ... align-items: flex-start}

Це дозволить уникнути розтягування зображень. Вони прийматимуть значення за замовчуванням widthта height значення.

Вони також будуть вирівнюватися до початку вертикальної осі, як показано нижче:

Тепер у нас є наша галерея, що працює на Flexbox.

Перевага використання Flexbox

На даний момент використання Flexbox не має великої переваги. Ми маємо той самий вигляд, який ми мали до запуску моделі Flexbox .

Окрім того, що безкоштовно отримати адаптивну галерею, інші переваги використання Flexbox походять від варіантів вирівнювання, які вона пропонує.

Пам'ятайте, що гнучкий контейнер .galleryприймає такі значення властивостей. flex-direction: rowjustify-content: flex-startіalign-items: flex-start.

Макет галереї можна миттєво змінити, зігравши зі значеннями за замовчуванням, як показано нижче:

.gallery { ... justify-content:center;}

Як видно на зображенні вище, це вирівняє зображення по центру вздовж горизонталі:

.gallery { ... justify-content:center; align-items: center;}

Як видно на зображенні вище, це вирівнює зображення як по горизонталі, так і по вертикалі до центру .gallery

З Flexbox поставляється безліч варіантів вирівнювання. Не соромтеся гратись із деякими іншими варіантами вирівнювання, як вважаєте за потрібне.

Ви можете переглянути справжню галерею Flexbox у цьому CodePen.

Приклад 2: Як створити картки за допомогою Flexbox

Картки стали популярними в Інтернеті. Google, Twitter, Pinterest, і, схоже, всі інші переходять на картки.

Картка - це шаблон дизайну інтерфейсу, який групує пов’язану інформацію в контейнері гнучкого розміру. Він візуально нагадує гральну карту.

Існує багато хороших способів використання карт. Загальним є сумнозвісна цінова система.

Давайте побудуємо одну.

Розмітка

Кожна картка матиме розмітку, як показано нижче:

    Буде щонайменше 3 картки. Оберніть карти в adiv.cards

    Тепер у нас є батьківський елемент.

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

    .cards { min-height: 100vh}

    Налаштуйте Flexbox

    Наступний блок коду ініціює контекст форматування Flexbox всередині .cards

    .cards { display: flex; flex-wrap: wrap}

    Якщо ви пам'ятаєте останній приклад, flex-wrapдозволить flex-itemsперейти на інший рядок.

    Це трапляється, коли дочірні елементи не можуть поміститися в батьківський елемент. Це пов’язано з більшим обчисленим розміром ширини об’єднаних дочірніх елементів.

    Вперед і задайте .cardпочаткову ширину.

    Використання Flexbox:

    .card { flex: 0 0 250px}

    Це встановить значення flex-growі для flex-shrinkзначень 0. flex-basisЗначення буде встановлено значення250px

    На цьому картки будуть вирівняні до початку сторінки. Вони також будуть тягнутися вздовж вертикалі.

    У деяких випадках це може бути ідеальним для вашого випадку використання. Але в більшості випадків це не буде.

    Поведінка гнучких контейнерів за замовчуванням

    Наведений результат обумовлений поведінкою гнучких контейнерів за замовчуванням.

    Картки починаються з початку сторінки на top leftтому justify-content, що встановлено значення flex-start.

    Крім того, картки розтягуються, щоб заповнити всю висоту батьківського елемента, тому що align-itemsвстановлено stretchза замовчуванням.

    Зміна значень за замовчуванням

    Ми можемо досягти досить вражаючих результатів, змінивши значення за замовчуванням, які пропонує Flexbox.

    Дивіться нижче:

    Щоб переглянути остаточний проект, див. Цей CodePen.

    Приклад 3: Як побудувати сітки за допомогою Flexbox

    Цілі фреймворки CSS побудовані на концепції, яка буде обговорена в цьому прикладі. Це досить важливі речі.

    Що таке сітка?

    Сітка - це серія прямих вертикальних і горизонтальних напрямних ліній, що перетинаються і використовуються для структурування вмісту.

    Якщо ви знайомі з фреймворками CSS, такими як Bootstrap, то ви впевнені, що раніше використовували сітки.

    Ваш пробіг може відрізнятися, але в цьому прикладі ми розглянемо різні типи сіток.

    Почнемо з першого,базові сітки .

    Основні сітки

    Це сітки з такими характеристиками:

    • Клітини сітки повинні бути розташовані однаково і розширюватися, щоб вмістити весь рядок.
    • Клітини сітки повинні мати однакову висоту.

    Домогтися цього легко за допомогою Flexbox. Розглянемо розмітку нижче:

     1

    Кожен .rowбуде своїм власним гнучким контейнером.

    Кожен елемент всередині .rowстає гнучким елементом. Всі елементи гнучко розподіляються рівномірно по ряду.

    За задумом не має значення, чи є у нас 3 дочірні елементи

     1/3 1/3 1/3

    Або 6 дочірніх елементів

     1/6 1/6 1/6 1/6 1/6 1/6

    Або 12 елементів

     1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12 1/12

    Рішення

    Для цього є лише два кроки.

    1. Ініціюйте контекст форматування Flexbox:
    .row { display: flex;}

    2. Нехай кожен flex-itemрозширюється, щоб вмістити весь рядок у рівних пропорціях:

    .row_cell { flex: 1}

    І це все.

    Пояснення рішення.

    flex: 1

    flex- це скорочена назва властивості для встановлення трьох різних властивостей Flexbox flex-grow, flex-shrinkі flex-basisвластивостей, у зазначеному порядку.

    flex: 1має лише встановлене значення 1. Це значення приписується flex-grow властивості.

    Для властивостей flex-shrinkand flex-basisбуде встановлено значення 1і 0.

    flex: 1 === flex: 1 1 0

    Клітини сітки з конкретними розмірами

    Іноді те, що вам потрібно, - це не сітчастий рядок з рівними клітинками.

    Можливо, вам знадобляться клітини, які вдвічі перевищують інші клітини, або будь-яка дріб.

    Рішення досить просте.

    До цих конкретних комірок сітки додайте клас модифікатора приблизно так:

    .row_cell--2 { flex: 2}

    Нехай клас буде включений у розмітку. Дивіться першу дитину divв розмітці нижче:

     2x 1/3 1/3

    Осередок із класом у .row__cell--22 рази перевищує клітинки за замовчуванням.

    Для комірки, яка займає в 3 рази більше доступного місця:

    .row_cell--3 {

    flex: 3

    }

    Клітини сітки з певними вирівнюваннями

    Завдяки Flexbox кожна комірка не повинна бути прив'язана до певного значення вирівнювання. Ви можете вказати конкретне вирівнювання для будь-якої комірки.

    Для цього використовуйте такі модифікаторські класи:

    .row_cell--top { align-self: flex-start}

    Це вирівняє конкретну комірку до верхньої частини row.

    Ви, мабуть, також додали клас до певної комірки у розмітці. Дивіться першу дитину divв розмітці нижче:

    Нижче наведено інші доступні варіанти вирівнювання:

    .row_cell--bottom { align-self: flex-end}
    .row_cell--center { align-self: center}

    Загальне вирівнювання в рядках

    Як можна вирівняти певні клітинки, так і цілі дочірні елементи в рядку.

    Для цього використовуйте клас модифікатора приблизно так:

    .row--top { align-items: flex-start}

    Важливо зазначити, що клас модифікатора .row--topповинен бути доданий до rowбатьківського абоflex-container

    Інші варіанти вирівнювання можна побачити нижче:

    .row--center { align-items: center}
    .row--bottom { align-items: flex-end}

    Вкладені сітки

    Не роблячи нічого конкретного, вони rowsможуть бути вкладені в себе.

    Ви можете переглянути остаточні сітки, створені тут.

    Ще більше сіток

    Хоча ви можете отримати фантазійні будівельні сітки з вертикальними сітками Flexbox та ще більш складними конфігураціями, використовуйте найкращий інструмент для роботи. Вивчіть, освойте та використовуйте макет сітки CSS. Це ідеальне рішення CSS для мережі.

    Приклад 4: Як створити макети веб-сайтів за допомогою Flexbox

    Спільнота зазвичай хмуриться, використовуючи Flexbox для повномасштабних веб-макетів.

    Незважаючи на те, що я з цим погоджуюсь, я також думаю, що в певних випадках ви можете з цим уникнути.

    Єдиною найважливішою порадою, яку я можу тут дати:

    Використовуйте Flexbox там, де це має сенс

    Поясню це твердження у наступному прикладі.

    Макет Святого Грааля

    Що краще створити для веб-сайту, ніж сумнозвісний « святий Грааль »?

    Існує 2 способи спробувати побудувати цей макет за допомогою Flexbox.

    Перший - це побудова макета за допомогою Flexbox. Місце header, footer, nav, articleі asideвсе в одному flex-container.

    Почнемо з цього.

    Розмітка

    Розглянемо основну розмітку нижче:

     Header  Article Nav Aside  Footer

    Серед іншого, існує певне правило, якого дотримується священний Грааль. Це правило надихнуло розмітку вище:

    Центральний стовпець articleповинен з’являтися першим у розмітці, перед двома бічними панелями navта aside.

    Ініціюйте контекст форматування Flexbox

    body { display: flex}

    Оскільки дочірні елементи повинні складатись зверху вниз, напрямок Flexbox за замовчуванням повинен бути змінений.

    body { ... flex-direction: column}

    1 . headerі footerповинна мати фіксовану ширину.

    header,footer { width: 20vh /*you can use pixels e.g. 200px*/}

    2.main необхідно зробити, щоб заповнити вільний вільний простір уflex-container

    main { flex: 1}

    Припускаючи , що ви не забули, flex: 1що еквівалентно flex-grow: 1, flex-shrink: 1іflex-basis: 0

    На цьому етапі нам потрібно подбати про вміст, в mainякому знаходяться article, navі aside.

    Налаштувати mainяк flex-container:

    main { display: flex}

    Майте navі asideзаймайте фіксовану ширину:

    nav,aside { width: 20vw}

    Переконайтеся, що articleзаймає залишок вільного місця:

    article { flex: 1}

    Зараз потрібно зробити ще одну річ.

    Змініть порядок, flex-itemsщоб navспочатку відображалося так:

    nav { order: -1}

    orderВластивість використовується для повторного замовлення позиції flex-items.

    Все flex-itemsв контейнері відображатиметься у зростаючихorder значеннях. Спочатку з’являються flex-itemзнаки з найнижчими orderзначеннями.

    Усі flex-itemsмають orderзначення за замовчуванням 0.

    Макет Святого Грааля (інше рішення)

    Попереднє рішення використовувало flex-containerяк загальний контейнер. Макет сильно залежить від Flexbox.

    Давайте побачимо більш “розумний” підхід. Знову подивіться на передбачуваний кінцевий результат:

    headerі footerможе розглядатися як елемент блоку. Без будь-якого втручання вони заповнять ширину вміщуючого їх елемента та складатимуть зверху вниз.

     Header  Article Nav Aside  Footer

    При такому підході єдино flex-containerнеобхідним було б main.

    Особливою проблемою цього підходу є те, що ви повинні обчислити висоту mainсебе. mainповинен заповнити вільний простір, крім місця, зайнятого headerіfooter.

    main { height: calc(100vh - 40vh);}

    Розглянемо блок коду вище. Він використовує функцію CSS calcдля обчислення висотиmain.

    Яким би не був ваш пробіг, висота mainповинна бути дорівнюєcalc(100vh — height of header — height of footer ).

    Як і в попередньому рішенні, ви мали надати headerі footerфіксовану висоту. Потім продовжуйте лікувати mainтак само, як і в попередньому рішенні.

    Ви можете переглянути фактичні результати тут.

    Макети веб-сайтів у 2 колонки

    Макети двох стовпців досить поширені. Їх також легко досягти за допомогою Flexbox.

    Розглянемо розмітку нижче:

     sidebar main

    Ініціюйте контекст форматування Flexbox:

    body { display: flex;}

    Вкажіть asideфіксовану ширину:

    aside { width: 20vw}

    Нарешті, переконайтеся, що mainзаповнює вільний вільний простір:

    main { flex: 1}

    Це майже все, що є в цьому.

    Приклад 5: Медіа-об'єкти з Flexbox

    Медіа-об’єкти є скрізь. Починаючи з твітів і закінчуючи публікаціями на Facebook, вони здаються найкращим вибором для більшості дизайнів інтерфейсу.

    Розглянемо розмітку нижче:

     Header

    Як ви вже здогадалися, .mediaвстановимо контекст форматування Flexbox:

    .media { display: flex}

    За замовчуванням flex-itemsa containerрозтягуються вздовж вертикалі, щоб заповнити доступну висоту в межах flex-container.

    Переконайтеся, що .media-bodyзаймає весь залишок вільного місця:

    .media-body { flex: 1}

    Зафіксуємо натягнуту коробку.

    .media { ... align-items: flex-start}

    І це все.

    Перевернутий медіа-об'єкт

    У вас немає зміни htmlпорядку джерела для створення перевернутого мультимедійного об’єкта.

    Просто переупорядкуйте flex-items так:

    .media-object { order: 1}

    Це буде відображати зображення після .media-bodyіmedia-heading

    Вкладений медіа-об’єкт

    Ви навіть можете продовжити вкладання об’єкта Media. Не змінюючи жодного із написаних нами стилів CSS.

     Header 
     Header

    Це працює!

    Медіа-об’єкт Unicode

    Здається, ми не обмежуємось лише зображеннями.

    Не змінюючи жодного із написаних стилів CSS, ви можете мати Unicode, що представляє зображення.

     ? 
     Header

    Я там притиснувся до смайликів.

    Забираючи imgта замінюючи його divна вміщуваний бажаний унікод, вийде вихідний результат. Ви можете захопити тут ще кілька унікодів смайлів.

    Медіа-об’єкт сутності HTML

    Можливо, ви також використовували HTML-сутності, як показано нижче.

     ☎ 
     Header

    Сутність HTML, використана в цьому прикладі, є, ☎і ви можете побачити результат нижче.

    Результат цих прикладів ви можете переглянути в цьому CodePen.

    Приклад 6: Як створити елементи форми за допомогою Flexbox

    Сьогодні важко знайти веб-сайт, який не має такої форми.

    Розглянемо розмітку нижче:

      … …  …  …

    У цьому прикладі показано поєднання вирівнювання полів введення за допомогою кнопок або інтервалів тексту. Рішення знову-таки досить просто за допомогою Flexbox.

    Ініціюйте контекст форматування Flexbox:

    .form { display: flex}

    Переконайтеся, що поле введення займає вільний простір:

    .form__field { flex: 1}

    Нарешті, ви можете стилізувати додані або додані тексти та кнопки, як би вам не здавалося.

    .form__item { ... }

    Ви можете переглянути повний результат цього прикладу в цьому CodePen.

    Приклад 7: Як створити макет мобільного додатка за допомогою Flexbox

    У цьому прикладі я розповім вам про процес розміщення мобільного додатка нижче:

    Однак цей приклад інший.

    Я поясню процес побудови мобільного макета в псевдокоді, і ви продовжите його будувати.

    Це буде форма практики для промокання рук .

    Крок 1

    Зніміть макет з iPhone, і у нас є таке:

    Крок 2

    Визначте вміщувальне тіло як a flex-container

    Крок 3

    За замовчуванням flex-directionдля a flex-containerвстановлено значення row. У цьому випадку змініть його на column.

    Крок 4

    Дайте пунктам 1 і 3 фіксовану висоту, таку як height: 50px.

    Крок 5

    Елемент 2 повинен мати висоту, яка заповнює вільний простір. Використовуйте flex-growабо flexскороченняflex: 1.

    Крок 6

    Нарешті, розгляньте кожен блок вмісту як медіа-об’єкт, як це видно з попереднього прикладу.

    Виконайте шість кроків вище, щоб успішно створити макет мобільного додатка.

    Хочете стати професіоналом?

    Завантажте мою безкоштовну шпаргалку CSS Grid, а також отримайте два якісні інтерактивні курси Flexbox безкоштовно!

    Отримайте їх зараз