- Примітка про підтримку в браузерах
- Нові значення властивості display
- display: flex
- display: grid
- вирівнювання блоків
- Колонки однакової висоти
- Вирівнювання в флексбоксе
- Вирівнювання в гріді
- Чуйність за замовчуванням
- Збереження пропорцій за допомогою грід-розкладки
- Поділ порядку в розмітці і візуального порядку елементів
- Наслідки переупорядковування для доступності.
- Нова система для розкладки
- ресурси
Розкладка в інтернеті залишається складною. Причина цього полягає в тому, що методи розкладки, які ми використовуємо з того моменту, як розкладка засобами CSS стала можливою, не призначалися для створення чогось складного. Хоча ми можемо зробити досить багато, поки працюємо з фіксованою шириною і використовуємо хакі типу штучних колонок, але ці методи розвалюються при чуйному дизайні. На щастя, у нас є надія у вигляді флексбокса, який багато хто вже знають і використовують, а також менш відомих технологій - CSS3 Grid Layout (далі грід) і модуля вирівнювання блоків.
У цій статті, я збираюся пояснити, як вони працюють разом, а ви відкриєте для себе, що розуміння флексбокса дуже близько наближає вас до розуміння гріда.
Примітка про підтримку в браузерах
На даний момент грід підтримується при активації прапора, а також в нічних збірках і збірках для розробників в Firefox, Safari, Chrome і Opera. Все, що ви побачите в статті, можна побачити в роботі, якщо ви активуєте прапор або використовуєте відповідні збірки браузерів. Я намагаюся підтримувати в актуальному стані список підтримки гріда в браузерах .
Нові значення властивості display
І grid, і flexbox є новими значеннями для властивості display. Щоб зробити елемент флекс-контейнером, ми використовуємо display: flex, аналогічно, щоб зробити грід-контейнер, ми використовуємо display: grid.
Як тільки ми це зробимо, безпосередні нащадки нашого флекс- або грід-контейнера стануть флекс- або грід-елементами, також вони отримають початкові значення флекс- або грід-елементів.
display: flex
У першому прикладі у нас є три елементи в контейнері, якому задано display: flex. Це все, що на потрібно, щоб почати використовувати флекбокс.
Поки ми не додамо інші значення властивостей, початкові значення властивостей флекс-контейнера наступні:
- flex-direction: row
- flex-wrap: no-wrap
- align-items: stretch
- justify-content: flex-start
Початкові значення для флекс-елементів:
- flex-grow: 0
- flex-shrink: 1
- flex-basis: auto
Ми поглянемо на роботу цих властивостей і значень пізніше. Зараз нам досить задати батьківського елементу display: flex і флексбокс буде працювати.
See the Pen Flexbox Defaults by rachelandrew ( @rachelandrew ) on CodePen .
display: grid
Для розкладки елементів по сітці ми використовуємо display: grid. Щоб побачити поведінку гріда, в прикладі буде використана розкладка з п'ятьма картами.
Додавання display: grid не вносить драматичних змін, проте дочірні елементи тепер стали грід-елементами. Вони розташувалися в один стовпчик смузі сітки, один під іншим, сітка створила неявні рядки для кожного елемента.
See the Pen Grid Defaults by rachelandrew ( @rachelandrew ) on CodePen .
Ми можемо зробити крок вперед і зробити розкладку більш схожою на сітку за рахунок додавання колонок. Для цього ми використовуємо властивість grid-template-rows.
У наступному прикладі, я створила три колонки рівної висоти використовуючи нову одиницю виміру в CSS, створену спеціально для гріда - fr. Це скорочення від fraction (частка), в даному випадку це частка доступного простору, яку повинна зайняти колонка. Ви можете бачити, як наші грід-елементи відразу ж розташувалися по сітці в кожній з клітин наших явно певних стовпців. У сітці як і раніше створюються незадаваемие явно рядки: у міру заповнення доступних осередків в колонках, рядки додаються для розміщення елементів, що залишилися.
See the Pen Grid Columns by rachelandrew ( @rachelandrew ) on CodePen .
Знову-таки, у нас є певна поведінка за умовчанням. Ми не позиціонували будь-які з цих грід-елементів, вони самі розміщували себе по нашій сітці, кожен в окрему клітинку. Початкові значення для грід-контейнера наступні:
- grid-auto-flow: row
- grid-auto-rows: auto
- align-items: stretch
- justify-items: stretch
- grid-gap: 0
Ці початкові значення означають, що наші грід-елементи розташовані кожен в окремій клітинці сітки, яка працює поперек рядів. Так як у нас трехколоночной сітка, після заповнення третьої колонки створюється новий ряд для розміщення елементів, що залишилися. Елементи розтягуються по вертикалі і горизонталі для заповнення площі сітки.
вирівнювання блоків
У цих двох прикладах ми вже зустрілися зі значеннями, визначеними в модулі вирівнювання блоків. " Box Alignment Module Level 3 "По суті відповідає за все вирівнювання і розподілу простору, певні в специфікації флексбокса і робить їх доступними для інших модулів. Тому, якщо ви вже використовуєте флексбокс, то ви використовуєте і вирівнювання блоків.
Подивимося, як вирівнювання блоків працює в флексбоксе і гріді, а також на ті проблеми, які ми вирішуємо з його допомогою.
Колонки однакової висоти
Це те, що дуже просто робилося за часів табличній розкладки, але чертовски складно робити за допомогою позиціонування і обтікання. Нижче, в прикладі з обтіканням, наші карти містять різну кількість контенту. У нас немає способу вказати іншим картками, що вони повинні візуально відповідати за висотою першій карті - так як у карт немає ніяких зв'язків один з одним.
See the Pen Floated Columns by rachelandrew ( @rachelandrew ) on CodePen .
Як тільки ми задаємо властивість display батьківського елемента в значення grid або flex, ми встановлюємо відносини між його нащадками. Ці відносини активують роботу властивостей вирівнювання блоків, роблячи створення колонок рівної висоти простим.
У прикладі з флексбоксом в наших елементах знаходиться різна кількість контенту. Фон кожного з них вирівнюється по лінії, а не сидить за контентом, як це повинно бути у плаваючих елементів. Так як ці елементи виведені в ряд, їх поведінку контролюється властивістю align-items. А для того, щоб колонки були однакової висоти, значенням цієї властивості має бути stretch - це початкове значення цієї властивості.
See the Pen Flexbox Equal Height Columns by rachelandrew ( @rachelandrew ) on CodePen .
Те ж саме ми бачимо і з розкладкою на гріді. Нижче показана найпростіша з розкладок - дві колонки (основний контент і бічна). Я знову використовую одиниці виміру fr: бічна колонка отримає значення 1, а основний контент - 3. Фоновий колір в боковій колонці доходить до того ж краю, що і контент в основний колонці. Знову, дефолтних значенням для align-items є stretch.
See the Pen Grid Equal Height Columns by rachelandrew ( @rachelandrew ) on CodePen .
Вирівнювання в флексбоксе
Ми побачили, що значенням за замовчуванням для align-items в флексбоксе і гріді є stretch.
У флексбоксе при використанні align-items, ми вирівнюємо елементи всередині флекс-контейнера на пересічних осях. Основна вісь визначається властивістю flex-direction. У першому прикладі основною віссю є ряд (горизонталь): ми розтягуємо елементи на протилежному осі до висоти флекс-контейнера. У свою чергу висота флекс-контейнера це висота флекс-елемента з найбільшою кількістю контенту.
збільшена версія
Я можу задати висоту контейнера і в цьому випадку його висота буде визначатися заданим значенням.
збільшена версія
Замість дефолтного значення stretch ми можемо використовувати і інші варіанти:
- flex-start
- flex-end
- baseline
- stretch
Для управління вирівнюванням по основній осі, використовуйте властивість justify-content. Його значення за замовчуванням flex-start, тому всі елементи вирівняні по лівому краю. У нас є вибір з наступних значень:
- flex-start
- flex-end
- center
- space-around
- space-between
Ключові слова space-between і space-around особливо цікаві. У випадку зі space-between, простір, що залишився після укладання флекс-елементів рівномірно розподіляється між ними.
збільшена версія
Використання space-around аналогічно, за винятком того, що розподіляється простір, що залишився з обох сторін від елементів, а половинні проміжки поміщаються в початок і кінець.
збільшена версія
Ви можете побачити роботу цих властивостей і значень в демо:
See the Pen Flexbox Alignment flex-direction: row by rachelandrew ( @rachelandrew ) on CodePen .
Ми також можемо вивести флекс-елементи як колонку, а не як ряд. Якщо ми змінимо значення flex-direction на column, то основною віссю стане колонка, а ряд стане поперечною віссю - align-items як і раніше в значенні stretch, а елементи розтягуються на ширину ряду.
збільшена версія
Якщо ми захочемо вирівняти їх по початку флекс-контейнера, ми використовуємо flex-start.
збільшена версія
See the Pen Flexbox Alignment flex-direction: column by rachelandrew ( @rachelandrew ) on CodePen .
Вирівнювання в гріді
У грід-розкладці поведінку схоже, за винятком того, що ми вирівнюємо елементи всередині заданої області сітки. У флексбоксе ми говоримо про основну і поперечної осях; у випадку з ґрідом ми використовуємо терміни "блокова" або "колоночная вісь" для опису осей, що визначають наші колонки, а терміни "рядкова" і "рядна вісь" для опису осей, що визначають наші ряди, як це задано специфікацією .
Ми можемо вирівняти контент всередині області гріда, використовуючи властивості і значення, описані в специфікації вирівнювання блоків.
Область гріда це одна або більше клітинок. У прикладі нижче, у нас є четирехколоночная і чотирирядна сітка. Ряди відокремлені відступами в 10 пікселів і у нас є три області гріда, створені з використанням позиціонування на основі ліній. Ми пізніше детально розглянемо таке позиціонування, зараз скажу, що значення перед / це лінія, з якої починається контент, а значення після це місце, де контент завершується.
See the Pen Grid Alignment: align-items and justify-items by rachelandrew ( @rachelandrew ) on CodePen .
Точкова межа фонового зображення допомагає нам побачити задані області. Так в першому прикладі, кожна область використовує дефолтний значення stretch для align-items на осі колонки і justify-items на осі ряду. Це означає, що контент розтягується для повного заповнення області.
збільшена версія
У другому прикладі, я змінила значення align-items в грід-контейнері на center. Ми також можемо змінити це значення в окремому грід-елементі за допомогою властивості align-self. У цьому випадку, я задала значення center всіх елементів, крім другого, якому задано stretch.
збільшена версія
У третьому прикладі, я знову поміняла значення justify-items і justify-self, задавши відповідно center і stretch.
збільшена версія
У всіх цих прикладах контент вирівнювався в областях гріда, області визначалися початком і закінченням лінії гріда.
Ми також можемо вирівнювати всю сітку всередині контейнера, якщо наші смуги займають менше простору, ніж контейнер, якому задано display: grid. У цьому випадку ми можемо використовувати властивості align-content і justify-content, як і в випадку з флексбоксом.
See the Pen Grid Alignment: aligning the grid by rachelandrew ( @rachelandrew ) on CodePen .
У першому прикладі ми бачимо вирівнювання за умовчанням, при якому колонки і ряди задаються в абсолютних величинах і займають менше простору, ніж дозволяє їх контейнер фіксованої ширини. Дефолтний значення для обох start.
збільшена версія
Щоб зрушити смуги вправо вниз, ми змінимо значення на end.
збільшена версія
Також як і з флексбоксом, ми можемо використовувати space-around і space-between. Це може спричинити поведінку, яке може бути небажаним для нас, так як відступи в сітці стануть ширшими. Однак, як ви можете бачити на зображенні нижче і в третьому прикладі на Codepen, ми отримуємо ті ж відступи між смугами, які у нас були з флексбоксом.
збільшена версія
Смуги фіксованого розміру отримують додатковий простір, якщо вони охоплюють більше однієї смуги. Елементи # 2 і # 4 в нашому прикладі ширше, а # 3 вище, так як вони отримали додатковий простір, яке призначалося проміжку між смугами.
Ми можемо повністю центрировать грід, задавши align-content і justify-content значення center, як показано в останньому прикладі.
збільшена версія
У нас є чудові можливості вирівнювання в флексбоксе і гріді і в цілому вони працюють узгоджено. Ми можемо вирівняти окремі елементи і групи елементів так, щоб вони були чуйними і не накладалися один на одного - цього і не вистачало інтернету до теперішнього часу.
Чуйність за замовчуванням
В останньому розділі ми розглянули вирівнювання. Властивості вирівнювання блоків, які використовуються в розкладках на основі флексбокса і гріда це одна з областей, де ми бачимо, що ці специфікації виникли в світі, де чуйний дизайн є загальним принципом. Значення типу space-between, space-around і stretch дозволяють домогтися чуйності і рівного розподілу вмісту між елементами.
Однак тут є щось більше. Чуйний дизайн часто полягає в збереженні пропорцій. Коли ми розраховуємо колонки для чуйного дизайну, використовуючи підхід target ÷ context, представлений в статті Етана Маркотт "Fluid Grids" , Ми підтримуємо пропорції оригінального дизайну в абсолютних величинах. Флексбокс і грід дають нам більш прості способи роботи з пропорціями в нашому дизайні.
Флексбокс дає нам шлях до гнучкості на основі пріоритету контенту. Ми бачили це при використанні ключового слова space-between для завдання рівномірних відступів між елементами. Спочатку розраховується кількість простору між елементами, а потім простір, що залишився в контейнері ділиться і використовується для рівномірного розміщення елементів. Ми можемо добитися більшого контролю над розподілом контенту за рахунок властивостей, які ми можемо застосовувати до самих флекс-елементам:
- flex-grow
- flex-shrink
- flex-basis
Ці три властивості частіше вказуються в коротким записом властивості flex. Якщо ми додаємо елементу flex: 1 1 300px, ми вказуємо, що властивість flex-grow дорівнює 1, тобто цей елемент може розширюватися; flex-shrink дорівнює 1, це дозволить елементам зменшуватися, а flex-basis дорівнює 300 пікселям. Застосування цих правил до нашої карткової розкладці дасть наступний результат:
See the Pen Flexbox: flex properties by rachelandrew ( @rachelandrew ) on CodePen .
Наш flex-basis дорівнює 300 пікселям і у нас три карти в ряду. Якщо флекс-контейнер ширше 900 пікселів, тоді простір, що залишився ділиться на три і розподіляється порівну між елементами. Це тому що ми задали flex-grow рівний 1 і наші елементи можуть рости більше, ніж задано flex-basis. Ми також поставили flex-shrink рівний 1, а це значить, що якщо у нас не вистачить місця для трьох колонок по 300 пікселів, їх розмір зменшуватиметься в рівних частках.
Якщо ми хочемо, щоб ці елементи росли в різних пропорціях, тоді нам потрібно змінити значення flex-grow у одного або декількох елементів. Якщо ми захочемо, щоб перший елемент зайняв втричі більше доступного простору, то ми поставимо flex-grow: 3.
See the Pen Flexbox: flex properties by rachelandrew ( @rachelandrew ) on CodePen .
Доступне простір розподіляється після того, як виділено місце відповідно до заданого flex-basis. Саме тому наш перший елемент не став в три рази більше за інших, а просто зайняв три частини простору, що залишилося. Ви побачите більше зміна, якщо поставите flex-basis: 0, в такому випадку у нас не буде стартового значення, яке ми віднімаємо з ширини контейнера. Відповідно, вся ширина контейнера буде розподілена між елементами пропорційно.
See the Pen Flexbox: flex properties by rachelandrew ( @rachelandrew ) on CodePen .
Дуже корисним інструментом, що допомагає вам зрозуміти ці значення є Flexbox Tester . Передавайте йому різні значення і він розрахує для вас підсумкові значення, а також пояснить, чому вони вийшли.
Якщо ви використовуєте auto як значення flex-basis, то в ролі останнього буде використовуватися будь-який доступний розмір флекс-елемента. Якщо розміри не вказані, тоді як дефолтного буде використано значення content, тобто ширина контенту. Тому використання auto дуже корисно для багаторазово використовуваних компонентів, яким може знадобитися завдання розміру елемента. Ви можете використовувати auto і бути впевненими, що якщо елемент повинен бути певного розміру, то флексбокс забезпечить цей розмір.
У наступному прикладі, я задала всіх картах flex-basis: auto, а потім першою з них ширину в 350 пікселів. Таким чином flex-basis цієї першої карти тепер дорівнює 350 пікселям, у двох інших він визначається шириною контенту.
See the Pen Flexbox: flex properties by rachelandrew ( @rachelandrew ) on CodePen .
Якщо ми повернемося до нашого оригінального flex: 1 + 1 300px, додамо ще елементів і поставимо flex-wrap: wrap контейнеру, елементи будуть укладатися настільки близько, наскільки це можна при заданому значенні flex-basis. Якщо у нас 5 зображень і 3 з них укладаються в один ряд, тоді решту 2 будуть виведені на наступному. Так як елементам дозволено розширюватися, обидва перенесених елемента виростуть в рівній мірі і ми отримаємо 2 рівних збільшених елемента знизу і 3 рівних елемента зверху.
See the Pen Flexbox: wrapping by rachelandrew ( @rachelandrew ) on CodePen .
Часто виникає наступне питання: а як зробити так, щоб елементи в нижньому ряду були такими ж, як і в верхньому, залишаючи після себе порожній простір? З флексбоксом ніяк. Для такої поведінки потрібна розкладка на гріді.
Збереження пропорцій за допомогою грід-розкладки
Грід, як ми вже бачили володіє концепцією створення смуг колонок і рядів, в яких позиціонуються елементи. Коли ми створюємо гнучку грід-розкладку, ми задаємо пропорції при завданні смуг в грід-контейнері - саме смуг, а не елементів, як в флексбоксе. Ми вже стикалися зі спеціальною одиницею fr, коли створювали розкладку на гріді. Ця одиниця працює приблизно так само як flex-grow при flex-basis: 0. Вона розподіляє частки доступного простору в грід-контейнері.
У наступному прикладі коду, першій шпальті колонок було задано 2fr, двом іншим 1fr. Таким чином, ми ділимо простір на чотири частини і даємо дві частини першій шпальті і по одній двох залишилися.
See the Pen Simple grid show fraction units by rachelandrew ( @rachelandrew ) on CodePen .
Змішування абсолютних одиниць вимірювання та fr валідності. У наступному прикладі ми будемо мати смуга 2fr, смуга 1fr і смуга в 300 пікселів. Спочатку віднімається абсолютна величина для третьої смуги, а потім простір, що залишився ділиться на три, дві частини йдуть в першу смугу, а решта в другу.
See the Pen Grid: Mixing absolute and fraction units by rachelandrew ( @rachelandrew ) on CodePen .
Такоже з цього прикладу ви можете помітіті, что наші елементи Заповнюють зазначені Смуги - смороду НЕ розподіляються по всьому ряду, як в флексбоксе. Це тому, що в гріді ми створюємо двовимірну розкладку, а потім поміщаємо туди елементи. У флексбоксе ми беремо наш контент і укладаємо його стільки, скільки поміщається в одному вимірі, в колонці або в ряду, обробляючи додаткові ряди або колонки як абсолютно нові флекс-контейнери.
Добре те, що у нас як і раніше є спосіб створити стільки колонок певної величини, скільки влізе в контейнер. Ми можемо зробити це за допомогою синтаксису grid і repeat.
У наступному прикладі я буду використовувати синтаксис repeat для створення максимальної кількості двухсотпіксельних колонок, що міститься в контейнері. Я використовую синтаксис repeat для перерахування смуг з ключовим словом auto-fill і задається їм розміром.
На момент написання це не було імплементовано в Chrome, але працювало в версії Firefox для розробників.
See the Pen Grid: As many 200 pixel tracks as will fit by rachelandrew ( @rachelandrew ) on CodePen .
Ми можемо просунутися ще на один крок і скомбінувати часткові і абсолютні одиниці, щоб грід створював максимум двухсотпіксельних смуг, що містяться в контейнер і порівну розподілив між ними місце, що залишилося.
See the Pen Grid: As many 200 pixel tracks as will fit, distribute remain space evenly by rachelandrew ( @rachelandrew ) on CodePen .
Таким чином ми сумісний переваги двовимірної розкладки з гнучким кількістю смуг - і все це без медіазапросов. Далі ми розглянемо розширення специфікацій флексбокса і гріда. Там, де флексбокс припиняє розподіляти елементи в одному вимірі, грід тільки починає це робити.
Поділ порядку в розмітці і візуального порядку елементів
З флексбоксом ми можемо робити багато в плані позиціонування флекс-елементів. Ми можемо вибрати напрямки, в якому вони обтікають, задавши flex-direction в значення row, row-reverse або column, column-reverse і ми можемо поставити порядок, який контролює порядок виведення елементів.
See the Pen Flexbox: order by rachelandrew ( @rachelandrew ) on CodePen .
З грід-розкладкою, нам треба правильно розташувати дочірні елементи по сітці, яку ми визначили. У більшості прикладів ми покладаємося на автоматичне розміщення по сітці; правила, які визначають розміщення непозіціонірованних нами елементів. У наступному прикладі я використовую позиціонування на основі ліній, щоб позиціонувати елементи гріда.
Властивості grid-column і grid-row є коротким записом наступного набору властивостей: grid-column-start, grid-row-start, grid-column-end і grid-row-end. Значення перед / це лінія, з якої починається контент, а значення після - лінія, на якій контент закінчується.
See the Pen Grid: line-based positioning by rachelandrew ( @rachelandrew ) on CodePen .
Ви також можете назвати свої лінії. Це в нагоді, коли ви створюєте свою сітку в грід-контейнері. Імена ліній вказуються в квадратних дужках, а позиціонування здійснюється також як і в попередньому прикладі, тільки замість індексу лінії вказується її ім'я.
See the Pen Grid: line-based positioning, named lines by rachelandrew ( @rachelandrew ) on CodePen .
У вас може бути кілька ліній з одним ім'ям і ви можете вказувати їх за допомогою імені та індексу.
Ви можете використовувати ключове слово span, охоплюючи вказане число ліній, наприклад, до третьої лінії з ім'ям col. Цей тип позиціонування корисний для використання компонентів, які містяться в різних місцях розкладки. У прикладі нижче, я хочу щоб деякі елементи розмістилися на 6 смугах колонок, а що залишилися зайняли б три смуги. Я використовую авторозміщення для розкладки елементів, але коли грід зустрічає елемент з класом wide, стартове значення буде auto, а кінцеве span 2; таким чином він почнеться там, де і повинен почати автоматично, але потім охопить дві лінії.
See the Pen Grid: multiple lines with the same name by rachelandrew ( @rachelandrew ) on CodePen .
Використання авторозміщення з декількома подібними правилами може залишити прогалини у вашій стеку, також в сітці можуть з'явиться елементи вимагають двох смуг при наявності тільки одного. За замовчуванням грід просуває вперед, тому як тільки вона залишить пробіл, вона не буде повертатися, щоб заповнити його - якщо ми тільки не поставимо grid-auto-flow: dense, в цьому випадку грід буде повертатися для заповнення прогалин, беручи контент в DOM- порядку.
See the Pen Grid: grid-auto-flow: dense by rachelandrew ( @rachelandrew ) on CodePen .
Також є окремий метод позиціонування елементів в грід-розкладці - шляхом створення візуального представлення розкладки безпосередньо у властивості grid-template-areas. Для цього вам спочатку треба привласнити імена всім прямим нащадкам грід-контейнера, які ви хочете позиціонувати.
Потім ми маємо в своєму розпорядженні елементи в манері ASCII-арту, вказуючи значення grid-template-areas. Якщо ви хочете повністю змінювати розкладку за допомогою медіазапросов, вам достатньо змінити тільки це властивість.
See the Pen Grid: template areas by rachelandrew ( @rachelandrew ) on CodePen .
Як ви можете бачити з прикладу, щоб залишити осередок порожній, ми використовуємо точку або серію точок без порожнього простору між ними. Щоб викликати охоплення елементом декількох смуг, ми повторюємо його ім'я.
Наслідки переупорядковування для доступності.
У флексбоксе, а ще больш в гріді, нам потрібно з великою обережністю використовувати методи для переупорядковування контенту. Ось що говорить специфікація флексбокса :
Автори повинні змінювати тільки візуальний, а не логічний порядок. Таблиці стилів не повинні виробляти логічне переупорядочивание.
І попередження в специфікації гріда :
Грід-розкладка дає авторам можливість перестановки по всьому документу. Однак це не є заміною коректної розмітці початкових кодів документа. Властивості упорядкування та розміщення по сітці не зачіпають невізуальні медіа (такі як мова). Крім того, візуальне зміна порядку грід-елементів не впливає порядок проходу по ним в режимі послідовної навігації (наприклад, по посиланнях).
В обох випадках, як визначено на даний момент, переупорядочивание є виключно візуальним. Воно не змінює логічний порядок документа. Додатково нам треба особливо подбати про людей з вадами зору користувачів з клавіатурою. Дуже легко зробити так, що при проході табом по документу ми будемо перескакувати з навігації зверху вниз документа через те, що грід-елемент в джерелі знаходиться раніше, ніж позиціонується візуально.
Нова система для розкладки
Я не розглядала кожен аспект флексбокса і гріда в цій статті - моя мета полягала в тому, щоб показати подібності та відмінності в специфікаціях і заодно розповісти про вирівнювання блоків. Для демонстрації того, що ці специфікації принесли нам нову систему розкладки, яка відповідає потребам сайтів і додатків, які ми створюємо зараз.
На даний момент флексбокс працює у всіх основних браузерах, в той час як грід під прапором працює в Chrome, Opera, Safari і Firefox. Флексбокс спочатку працював з префиксной версією, яка використовувалася розробниками, але потім він змінився, залишивши нас з відчуттям, що ми не можемо покладатися на нього. Грід розроблявся під прапором і якщо ви подивіться приклади в статті з активованим прапором, ви помітите, що імплементації вже дуже сумісні. На даний момент специфікація знаходиться в статусі кандидата в рекомендації. Тому коли грід вийде в роботу (це очікується на початку наступного року) у нього буде солідна кросбраузерності підтримка.
Можете пограти з прикладами зі статті, а також ознайомитися з іншими ресурсами, які наведені в списку нижче.
ресурси
Ось деякі ресурси, які допоможуть вам глибше дослідити специфікації:
Часто виникає наступне питання: а як зробити так, щоб елементи в нижньому ряду були такими ж, як і в верхньому, залишаючи після себе порожній простір?