Освоение flexbox для современных веб-приложений
Несмотря на то, что синтаксис может быть изначально запутать, модуль flexbox соответствует своему названию. Он создает интеллектуальные блоки, способные растягиваться и изменять свой визуальный порядок. Он обеспечивает простое решение для проблем, с которыми всегда сталкивались в CSS: вертикальное центрирование и равные высоты. Flex-элементы действительно удобны и с ними приятно работать.
Крис Койер красиво резюмирует flexbox:
Модуль Flexbox Layout (flexible box — «гибкий блок», на данный момент W3C Last Call Working Draft) ставит задачу предложить более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический (отсюда слово «гибкий»).
Главная идея flex-лайаута заключется в наделении контейнера способностью изменять ширину/высоту (и порядок) своих элементов для наилучшего заполнения пространства (чаще всего для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.
Flexbox действительно прекрасно себя показывает в HTML5-приложениях. Большинство веб-приложений состоят из ряда модульных, многократно используемых компонентов. Вы можете использовать flexbox для тех участков макета, которые вызывают особую головную боль и для которых в обычных случаях необходимы CSS-хаки. Небольшие участки лайаута очень хорошо работают с flexbox, а для лайаутов большого масштаба можно использовать floats и другие инструменты.
Я c размахом использую flexbox в приложении, над которым сейчас работаю, и я очень доволна тем, как он управляет лайаутом и насколько умно производятся расчеты с блоками. Я хотела бы поделиться некоторыми примерами — буду признателна за любую обратную связь.
Эта статья предполагает, что у вас уже есть представление о flexbox. Множество информации о нем можно найти в интернете. Но имейте в виду, что спецификация претерпела несколько изменений за несколько лет.
Есть три версии flexbox, наибольшая разница в синтаксисе между версиями 2009 и 2012 годов:
- Новый синтаксис синхронизирован с текущей спецификацией (например, display: flex).
- Переходный синтаксис — неофициальный синтаксис с 2012 года, поддерживается только IE 10 (например, display: -ms-flexbox).
- Старый синтаксис с 2009 года (например, display: box).
Поддержка браузерами
Посмотреть более детально, какой браузер какой синтаксис поддерживает можно на Can I Use .
Браузеры, поддерживающие новый синтаксис
Десктоп:
- без префикса: Chrome 29+, Firefox 28+, IE 11+, Opera 17+
- с префиксом: -webkit- для Chrome 21+, Safari 6.1+, Opera 15+
Обратите внимание, что старые версии Firefox (22-27) поддерживают новый синтаксис Flexbox за исключением свойств flex-wrap и flex-flow. Opers (12.1+ и 17+) поддерживает flexbox без вендорного префикса, но промежуточные версии 15 и 16 требуют вендорный префикс.
Touch-устройства:
- без префикса: Android 4.4+, Opera mobile 12.1+, BlackBerry 10+, Chrome for Android 39+, Firefox for Android 33+, IE 11+ mobile
- с префиксом: -webkit- для iOS 7.1+
Почти все браузеры, упомянутые выше, имеют старые версии, которые поддерживают предыдущий вариант синтаксиса flexbox, за исключением некоторых свойств, таких как flex-wrap и flex-flow (последний является сокращением свойств flex-direction и flex-wrap). Если избегать свойства flex-wrap (и, соотвественно, использовать flexbox в многострочных лайаутах), мы получаем потрясающую поддержку браузерами, сливая старый и новый синтаксис.
Браузеры, поддерживающие промежуточный синтаксис
Desktop и touch-устройства: IE 10 (with -ms- vendor prefix)
Браузеры, поддерживающие старый синтаксис
Все перечисленные браузеры требуют префикс -webkit- (за исключением Firefox, которому необходим префикс -moz-).Десктоп: Firefox 2 — 21, Chrome 4 — 20, Safari 3.1 — 6
Touch-устройства: Android 2.1 — 4.3, iOS 3.2 — 6.1, UC browser 9.9 on Android, BlackBerry 7
Для современных браузеров c авто-обновлением (т.е. десктопных Chrome, Firefox, IE и Opera), новый синтаксис работает из коробки.
Браузеры, не поддерживающие flexbox
Десктоп: Старые версии IE (9) и Opera (12)
Touch-устройства: Opera Mini
Если вас испугали вендорные префиксы и изменения в синтаксисе, посмотрите рекомендации Криса Койера .
Такжен вы можете использовать следующие инструменты, чтобы получить наилучшую поддержку браузерами через префиксы:
Среди этих инструментов я бы рекомендовал Autoprefixer. Я не экспериментировал с другими заточенными под препроцессоры решениями и буду рад отзывам. Обратите внимание, если вы используете миксины CSS-фреймворков (каких как Bourbon или Compass для Sass, Nib для Stylus или LESS Hat for LESS), они уже поддерживают вендорные префиксы для flexbox.
С помощью такого инструмента, как Autoprefixer, вы действительно получите большую поддержку flexbox, за исключением IE 9 и Opera Mini. Конечно, вы должны будете тщательно проверить ваше приложение во всех браузерах, чтобы убедиться, что различный синтаксис поддерживается.
Давайте посмотрим на несколько хороших примеров использования flexbox в веб-приложении.
1. Неопределенное число детей в родительском элементе
Use case: В моем приложении еcть фильтр. Количество фильтров зависит от того, авторизован пользователь или нет. Анонимный пользователь видит два фильтра («Popular» и «Latest»), тогда как авторизованный пользователь видит четыре (добавляются «Starred» и «Favorites»).
Проблема: Я хочу написать стили для обоих вариантов без каких-либо изменений в CSS
Обсуждение:
Обычно вы используете выражение if в шаблоне, чтобы проверить, авторизован ли пользователь. Если мы используем float при верстке, то для неавторизованного пользователя мы задаем ширину одного фильтра 50%, а для авторизованного — 25%.Решение: используя flexbox, вы можете задать свойство display: flex родительскому контейнеру, а дочерним — свойство flex равное 1, сделав таким образом дочерние элементы равной ширины внутри контейнера. Таким образом, CSS остается неизменным не зависимо от количества элементов. Помните, что свойство flex — это сокращение flex-grow, flex-shrinkand flex-basis.
Демо:
See the Pen Flexbox: Parents with an unknown number of children by Karen Menezes (@imohkay) on CodePen.
2. Поля ввода с иконками
Use case: Я хочу добавить смысловые иконки к полям ввода на форме.
Обсуждение: Это одна из классических проблем. Разные CSS-фреймворки решают ее по-разному, в основном, используя display: table-cell или абсолютное позиционирование.
Решение: а теперь flex-решение. Все, что нам нужно, это обернуть поле ввода и иконку в контейнер с display: flex. Затем, применить flex: 1 к полю ввода для того, чтобы оно заняло всю ширину контенера минус ширина иконки.
Демо (используется иконка Font Awesome):
See the Pen Flexbox: Inputs with icons by Karen Menezes (@imohkay) on CodePen.
3. Визуальный порядок элементов
Flexbox может использоваться для изменения визуального порядка элементов без изменения порядка этих элементов в исходном документе. Наша задача, как разработчиков, ответственно использовать силу этих механизмов.
По факту, мы можем структурировать наш документ для поддержки приложений чтения с экрана (к примеру, расположить боковую панель бед основным содержимым в исходном коде) и использовать flexbox для изменения визуального порядка (расположить боковую панель справа от основного контента, используя свойства order и flex-direction). Давайте рассморим этот вопрос подробнее.
А. Изменение визуального порядка с помощью flex-direction
Use case: У меня есть боковая панель, спозиционированная справа от основного содержимого. На маленьких экранах я хочу, чтобы панель располагалась сверху от основного содержимого, т.е. в обратном порядке.
Проблема: Я не хочу использовать JavaScript или CSS хаки для изменения визуального порядка.
Обсуждение: Flexbox — это удивительный инструмент для адаптивных макетов. Мы можем использовать его двумя способами: использовать свойство flex-direction или свойство order. Давайте рассмотрим первый вариант.
Решение: Расположим боковую панель перед основным содержимым в лайауте. У этого есть две причины: во-первых, мы придерживаемся принципа mobile-first, а во-вторых — такое расположение больше подходит для программ чтения с экрана. Зададим свойство flex-direction: column для родительского контейнера (по умолчанию оно имеет значение row). В медиа запросе для больших экранов, изменим значение flex-direction на row-reverse, это решит нашу задачу.
В качестве бонуса, зададим ширину 180px для боковой панели на больших экранах.
See the Pen Flexbox: Sidebar with source order independence using flex-direction by Karen Menezes (@imohkay) on CodePen.
B. Изменение визуального порядка с помощью свойства order
Use case и проблема остаются такими же, как в предыдущем примере.
Обсуждение: Свойство order предоставляет больший контроль над визуальным порядком, чем flex-direction.
Решение: Зададим свойство flex-direction: column родительскому контейнеру для мобильных устройств. Теперь, в медиа запросе min-width изменим свойство flex-direction на row, чтобы боковая панель отображалась слева, а основное содержимое справа. Чтобы изменить порядок элементов, укажем свойство order: 1 для основного содержимого и order: 2 — для боковой панели!
See the Pen Flexbox: Sidebar with source order independence using order by Karen Menezes (@imohkay) on CodePen.
С. Переключение порядка элементов
Use case: Я хочу отобразить список из пяти наиболее высокооплачиваемых актеров Голливуда в 2013 году, и добавить возможность переключения направления сортировки.
Проблема: Я хочу сделать это на чистом CSS, я не знаю почему и вообще не уверен, возможно ли это.
Обсуждение: Это простая демонстрация без использования JavaScript, чтобы показать мощные возможности Flexbox. Возможно, это непрактично и глупо, но давайте посмотрим, возможно ли это вообще.
Решение: Добавим переключатель, который будет изменять порядок элементов от меньшего к большему. Ниже добавим список актеров. Используя псевдо-класс :checked, мы выберем следующий за переключателем список и изменим порядок элементов в нем (в помощью flex-direction: column-reverse). Это довольно странно, но прекрасно работает, если вы не используете приложения для чтения с экрана. В приведенном ниже демо, используйте переключатель, чтобы посмотреть результат. В спецификации упоминается, что свойство order не влият ни на tabindex, ни на программы чтения с экрана, но я бы не рекомендовал этот способ на реальных проектах. Тем не менее этот способ можно использовать для быстрого прототипа.
Обратите внимание: В текущей версии Firefox есть баг — tabindex соответствует визуальному порядку, а не исходному порядку. Вы можете посмотреть тест-кейсы CSS Accessibility Community Group.
See the Pen Flexbox: Toggling a list’s order by Karen Menezes (@imohkay) on CodePen.
4. Модуль комментариев
Use case: У меня есть обычный модуль комментариев, с изображением слева и содержимым справа. Аватар всегда одинаковой нирины и высоты (не адаптивный).
Проблема: Я использую flexbox, но содержимое перекрывает изображение:
Если задать max-width 100% и height auto для изображения, получим следующее:
Обсуждение: Этот пример похож на пример «Поля ввода с иконками». Тем не менее, мы можем использовать его для обсуждения свойства flex-shrink, которое может быть полезно в некоторых случаях.
Решение: Добавим свойство display: flex родительскому контейнеру. Вы можете заметить, что содержимое комментария перекрывает аватар (или аватар слишком маленький, как на картинке выше). Чтобы исправить это, добавим к изображению свойство flex-shrink: 0, которое гарантирует, что аватар не будет уменьшаться, подстраиваясь под другие flex-элементы. Альтернативный способ — задать свойство flex: 1 содержимому комментария. В целом, спецификация рекоммедует использовать свойство flex, однако неплохо знать и о свойстве flex-shrink.
See the Pen Comments module with flexbox by Karen Menezes (@imohkay) on CodePen.
5. Комплексное меню
Use case: Меню в моем приложении включает форму поиска и виджет фильтрации. В нем смешаны кнопки, поля ввода, иконки и текст.
Проблема: Я беспокоюсь о том, чтобы лайаут не сломался на разных размерах экрана.
Обсуждение: Это отличный случай, чтобы использовать flexbox. У нас есть несколько элементов фиксированной ширины и несколько элементов, которые должны заполнять всю доступную ширину.
Решение: Мы можем использовать flexbox, чтобы задать вертикальное центрирование и сделать блок фильтраии и поиска адаптивным.
See the Pen Flexbox demo: Search and filter by Karen Menezes (@imohkay) on CodePen.
6. Карточки
Use case: Я делаю модуль карточек для моего приложения на основе компонента Google. В мобильной версии эти карточки выстраиваются в одну колонку.
Проблема: Я хочу, чтобы на больших экранах карточки располагались в строку. Высота карточек в одной строке должна быть одинаковой, но я не хочу создавать дополнительные обертки для строк. Кнопка «See more» должна всегда располагаться внизу карточки.
Обсуждение: Мы можем рассмотреть дополнительные свойства модуля flexbox, такие так margin: auto, чтобы более разумно управлять интервалом.
Решение: Flexbox предоставляет неверояное решение для древней проблемы CSS: выравнивания высот. На самом деле flexbox является настолько гибким, что позволяет сделать карточки в одной строке одинаковой высоты, при этом каждая строка не будет обернута в дополнительный контейнер. Он также позволяет отобразить кнопку «See all» так, как если бы она была абсолютно спозиционирована по низу относительно карточки с помощью margin: auto.
See the Pen Flexbox: Card module by Karen Menezes (@imohkay) on CodePen.
Заключение
Flexbox идеально подходит для гибридного веб-приложения, целевая аудитория которого по большей части пользуется планшетами с современными браузерами. На самом деле, некоторые популярные CSS-фреймворки уже используют flexbox, например, Foundation for Apps и Ionic .
Если ваше приложение требует поддержки только современных браузеров, добро пожаловать на борт! Использование инструментов, таких, как Autoprefixer, облегчает переход в мир flexbox, с его многочисленными версиями и разным синтаксисом.
Пока flexbox используется хорошо вместе с float, но он может и заменить его, а также делать другие вещи, которые не могут другие способы расположения блоков, такие как inline-блоки, display: table или абсолютное позиционирование. CSS Grid Layout Module предназначен для замены таких хаков, как float, но пока этот стандарт находится на ранней стадии и плохо поддерживается браузерами . Однако я смею мечтать, что в будущем мы будем использовать CSS сетки и flexbox, чтобы создавать интуативны пользовательские интерфейсы.
Это займет некоторое время, пока вы скажете «Ага!» flexbox, потому что вам отвыкать от того, что вы уже знаете о расположении блоков CSS. После того, как вы свободно заговорите на языке CSS, процесс проектирования приложений станет для вас более простым, а таблицы стилей будут выглядеть красивее.
Свойство flex-direction | CSS справочник
CSS свойстваОпределение и применение
CSS свойство flex-direction позволяет указать направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера.
Направление флекс элементов формируется исходя из положения двух осей: главной оси флекс контейнера и его поперечной оси, которая всегда распологается перпендикулярно главной. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а поперечная – сверху вниз (это значение по умолчанию), для значения rtl отображается зеркально соответственно.
Обращаю Ваше внимание, если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-direction не окажет на такой элемент никакого эффекта.
Схематичное отображение работы свойства flex-direction отображено на следующем изображении (при направлении ltr):
Поддержка браузерами
CSS синтаксис:
flex-direction:"row | row-reverse | column | column-reverse | initial | inherit";
JavaScript синтаксис:
object.style.flexDirection = "column"
Значения свойства
| Значение | Описание |
|---|---|
| row | Флекс элементы отображаются горизонтально, в виде строки. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а при значения rtl отображается справо налево. Это значение по умолчанию. |
| row-reverse | Флекс элементы отображаются горизонтально, в виде строки по аналогии со значением row, но формирование строки идёт в обратном направлении. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается справо налево, а при значения rtl отображается слева направо. |
| column | Флекс элементы отображаются вертикально как колонны. Формирование колонны осуществляется сверху вниз. |
| column-reverse | Флекс элементы отображаются вертикально как колонны по аналогии со значением column, но формирование колонны идёт в обратном направлении (снизу вверх). |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Пример указания направления для флекс элементов</title>
<style>
.container {
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
-webkit-flex-direction: row; /* для поддержки ранних версий браузеров */
flex-direction: row; /* флекс элементы отображаются горизонтально, в виде строки (по умолчанию) */
}
.container2 {
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
-webkit-flex-direction: column; /* для поддержки ранних версий браузеров */
flex-direction: column; /* флекс элементы отображаются вертикально как колонны */
}
.container3 {
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
-webkit-flex-direction: row-reverse; /* для поддержки ранних версий браузеров */
flex-direction: row-reverse; /* флекс элементы отображаются горизонтально, в виде строки по аналогии со значением row, но формирование строки идёт в обратном направлении */
}
.container4 {
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
-webkit-flex-directiСвойство flex-shrink | CSS справочник
CSS свойстваОпределение и применение
CSS свойство flex-shrink определяет, как элемент будет сжиматься относительно остальных флекс элементов в контейнере (при недостатке свободного пространства).
Если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-shrink не окажет на такой элемент никакого эффекта.
Поддержка браузерами
CSS синтаксис:
flex-shrink:"number | initial | inherit";
JavaScript синтаксис:
object.style.flexShrink = "3"
Значения свойства
| Значение | Описание |
|---|---|
| number | Число, которое указывает, на сколько будет уменьшен блок по отношению к остальным флекс элементам в контейнере (при недостатке свободного пространства). Если мы устанавливаем значение равное 0, то мы запрещаем сжиматься элементу до размеров меньше чем его базовая ширина. Отрицательные значения не допускаются. Значение по умолчанию 1. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Да.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Уменьшение флекс элементов в CSS</title>
<style>
.container {
width: 250px; /* устанавливаем ширину блока */
height: 100px; /* устанавливаем высоту блока */
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
color: white; /* устанавливаем цвет шрифта */
/* устанавливаем два свойства для возможности масштабировать контейнер по горизонтали (изменять ширину): */
overflow: auto; /* указываем, что при переполнении содержимое отображается (автоматический режим) */
resize: horizontal; /* пользователь может изменять ширину элемента */
}
.container div:nth-of-type(1) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере)
-webkit-flex-basis: 150px; /* для поддержки ранних версий браузеров */
flex-basis: 150px; /* определяет начальную ширину флекс элемента (приведет сразу к уменьшению второго блока, т.к. ширина контейнера 250px) */
-webkit-flex-shrink: 1; /* для поддержки ранних версий браузеров */
flex-shrink: 1; /* число, которое указывает, на сколько будет уменьшен блок по отношению к остальным флекс элементам */
background: orange; /* устанавливаем цвет заднего фона */
}
.container div:nth-of-type(2) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере)
-webkit-flex-basis: 150px; /* для поддержки ранних версий браузеров */
flex-basis: 150px; /* определяет начальную ширину флекс элемента (приведет сразу к уменьшению второго блока, т.к. ширина контейнера 250px) */
-webkit-flex-shrink: 3; /* для поддержки ранних версий браузеров */
flex-shrink: 3; /* число, которое указывает, на сколько будет уменьшен блок по отношению к остальным флекс элементам */
background: brown; /* устанавливаем цвет заднего фона */
}
.container div:nth-of-type(3) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере)
-webkit-flex-basis: 150px; /* для поддержки ранних версий браузеров */
flex-basis: 150px; /* определяет начальную ширину флекс элемента (приведет сразу к уменьшению второго блока, т.к. ширина контейнера 250px) */
-webkit-flex-shrink: 1; /* для поддержки ранних версий браузеров */
flex-shrink: 1; /* число, которое указывает, на сколько будет уменьшен блок по отношению к остальным флекс элементам */
background: tan; /* устанавливаем цвет заднего фона */
}
</style>
</head>
<body>
<divСвойство flex-wrap | CSS справочник
CSS свойстваОпределение и применение
CSS свойство flex-wrap определяет, будет ли флекс контейнер однострочным, или многострочным. По умолчанию контейнер является однострочным, для многострочных контейнеров допускается контролировать направление, в котором размещаются флекс элементы.
Обращаю Ваше внимание, если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-wrap не окажет на такой элемент никакого эффекта.
Схематичное отображение работы свойства flex-wrap отображено на следующем изображении:
Поддержка браузерами
CSS синтаксис:
flex-wrap: "nowrap | wrap | wrap-reverse | initial | inherit";
JavaScript синтаксис:
object.style.flexWrap = "wrap-reverse"
Значения свойства
| Значение | Описание |
|---|---|
| nowrap | Указывает, что флекс элементы выстраиваются в одну строку. Это значение по умолчанию. |
| wrap | Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения). Флекс элементы размещаются слева направо при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr), а при значении rtl размещаются справа налево. |
| wrap-reverse | Указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) по аналогии со значением wrap, но формирование строк идёт в обратном порядке. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS 3Наследуется
Нет.Анимируемое
Нет.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Однострочные и многострочные флекс контейнеры</title>
<style>
.container {
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
-webkit-flex-wrap: nowrap; /* для поддержки ранних версий браузеров */
flex-wrap: nowrap; /* указывает, что флекс элементы выстраиваются в одну строку(это значение по умолчанию) */
}
.container2 {
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
-webkit-flex-wrap: wrap; /* для поддержки ранних версий браузеров */
flex-wrap: wrap; /* указывает, что флекс элементы внутри контейнера располагаются в несколько горизонтальных рядов (в случае переполнения) */
}
.container3 {
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
-webkit-flex-wrap: wrap-reverse; /* для поддержки ранних версий браузеров */
flex-wrap: wrap-reverse; /* по аналогии со значением wrap, но формирование строки идёт в обратном порядке */
}
div > div { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь элементов <div>)
width: 40%; /* устанавливаем ширину блока */
height: 25px; /* устанавливаем высоту блока */
border: 1px solid orange; /* устанавливаем сплошную границу 1px оранжевого цвета */
}
</style>
</head>
<body>
<h4>flex-wrap:nowrap;</h4>
<div class = "container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h4>flex-wrap:wrap;</h4>
<div class = "container2">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
<h4>flex-wrap:wrap-reverse;</h4>
<div class = "container3">
<div>A</div>
<div>B</div>
<div>CСвойство flex-basis | CSS справочник
CSS свойстваОпределение и применение
CSS свойство flex-basis определяет размер для флекс элемента, установленный по умолчанию перед распределением пространства внутри флекс контейнера.
Если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-basis не окажет на такой элемент никакого эффекта.
Поддержка браузерами
CSS синтаксис:
flex-basis:"auto | width | initial | inherit";
JavaScript синтаксис:
object.style.flexBasis = "100px"
Значения свойства
| Значение | Описание |
|---|---|
| auto | Размер равен размеру флекс элемента. Если элемент не имеет заданного размера, то размер будет высчитываться в зависимости от содержания элемента. Это значение по умолчанию. |
| width | Определяет размер для флекс элемента, установленный по умолчанию перед распределением пространства в контейнере. Допускается использование как абсолютных значений (px, em, pt и так далее), так и значения в процентах. Отрицательные значения не допускаются. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Нет.Анимируемое
Да.Пример использования
<!DOCTYPE html>
<html>
<head>
<title>Размер флекс элементов по умолчанию в CSS</title>
<style>
.container {
width: 250px; /* устанавливаем ширину блока */
height: 100px; /* устанавливаем высоту блока */
display: -webkit-flex; /* для поддержки ранних версий браузеров */
display: flex; /* элемент отображается как блочный flex-контейнер */
color: white; /* устанавливаем цвет шрифта */
/* устанавливаем два свойства для возможности масштабировать контейнер по горизонтали (изменять ширину): */
overflow: auto; /* указываем, что при переполнении содержимое отображается (автоматический режим) */
resize: horizontal; /* пользователь может изменять ширину элемента */
}
.container div:nth-of-type(1) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере)
-webkit-flex-basis: auto; /* для поддержки ранних версий браузеров */
flex-basis: auto; /* для элемента не задана ширина, поэтому ширина флекс элемента будет расчитываться исходя из содержания */
background: orange; /* устанавливаем цвет заднего фона */
}
.container div:nth-of-type(2) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере)
-webkit-flex-basis: 150px; /* для поддержки ранних версий браузеров */
flex-basis: 150px; /* определяет начальную ширину флекс элемента */
background: brown; /* устанавливаем цвет заднего фона */
}
.container div:nth-of-type(3) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере)
-webkit-flex-basis: auto; /* для поддержки ранних версий браузеров */
flex-basis: auto; /* для элемента не задана ширина, поэтому ширина флекс элемента будет расчитываться исходя из содержания */
background: tan; /* устанавливаем цвет заднего фона */
}
</style>
</head>
<body>
<div class = "container">
<div>auto</div>
<div>150px</div>
<div>auto</div>
</div>
</body>
</html>
Пример использования CSS свойства flex-basis(размер флекс элементов по умолчанию в CSS).CSS свойстваОбратная совместимость Flexbox — Веб-технологии для разработчиков
Flexbox очень хорошо поддерживается современными браузерами, однако есть несколько проблем, с которыми вы могли столкнуться. В этом руководстве мы рассмотрим, насколько хорошо flexbox поддерживается браузерами, а так же некоторые потенциальные проблемы, ресурсы и методы для создания обходных путей и запасных вариантов.
История flexbox
Как и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.
Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы всеравно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.
В 2009 спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать display: box и несколько box-* свойств, которые делали то, что сегодня вы понимаете под flexbox.
Очередное обновление спецификации поменяло синтаксис на display: flexbox — и опять с вендорными префиксами.
В конечном счете спецификация была обновлена, чтобы определить display: flex как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновленной версии спецификации отличная.
Существует несколько старых статей, которые описывают более ранние версии flexbox, их довольно легко вычислить по тому, как они описывают создание flex-контейнера. Если вы нашли что-то вроде display: box или display: flexbox, то это уже устаревшая информация.
Поддержка браузерами
Браузеры отлично поддерживают flexbox, и на данный момент большинству из них не нужны префиксы для этого. Safari последним из основных браузеров избавился от префиксов после релиза Safari 9 в 2015. Два браузера, о которых вам нужно помнить для обеспечения кроссбраузерности, это:
- Internet Explorer 10, который внедрил
display: flexboxверсию спецификации с префиксом-ms-. - UC Browser, который все еще поддерживает спецификацию версии 2009 год с
display: boxи префиксом-webkit-.
Также возьмите на заметку, что Explorer 11 поддерживает современный display: flex, однако не без багов.
Common issues
The majority of issues with flexbox relate to the changes in the specification, as it has been developed, and the fact that many of us were attempting to use an experimental specification in production. If you are trying to ensure backwards compatibility with old versions of browsers, and in particular IE10 and 11, the Flexbugs site is a helpful resource. You will see that many of the listed bugs apply to old browser versions and are fixed in current browsers. Each of the bugs has a workaround listed — which can save you many hours of puzzling.
If you want to include very old browsers with flexbox support then you can include the vendor prefixes in your CSS in addition to the unprefixed version. This is becoming less and less of a requirement today as support is widespread.
.wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}Autoprefixer Online is a useful way to see which prefixes are recommended, depending on how many versions you wish to go back with browser support. You can also check Can I Use for information about when prefixes were removed in browsers to make your decision.
Useful fallback techniques
Given that flexbox usage is initiated with value of the display property, when needing to support very old browsers which do not support flexbox at all, fallbacks can be created by overwriting one layout method with another. The specification defines what happens if you use other layout methods on an element which then becomes a flex item.
Floated items
“float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.” — 3. Flex Containers
In the following live example, I have floated two blocks and then set display: flex on the container. The items are now flex items, which means they stretch to equal height. Any float behaviour does not apply.
You can test the fallback behaviour by removing display: flex from the wrapper.
display: inline-block
Once an inline-block item becomes a flex item, it is blockified and so behavior of display: inline-block like preserving white space between items no longer applies.
Remove display: flex to see the fallback behavior. You’ll see white space added between the items, which is what happens when using display: inine-block as it prefers white space like other inline items.
display: table-
The CSS table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as Internet Explorer 8.
If you use display: table-cell on an item in your HTML it takes on the styling of an HTML table cell. CSS creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the HTML table row, and a second one to represent the table element itself, You can’t see or style these anonymous boxes; they are there purely to fix up the tree.
If you then declare display: flex on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features.
“Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.” — 4. Flex Items
The vertical-align property
The live example below demonstrates use of the vertical-align property along with display: inline-block. Both display: table-cell and display: inline-block allow for the use of this property. Use of vertical-align enables vertical alignment prior to flexbox. The property is ignored by flexbox and so you can use it in conjunction with display: table-cell or display: inline-block as a fallback and then safely use box alignment properties in flexbox instead.
Feature Queries and flexbox
You can use feature queries to detect flexbox support:
@supports (display: flex) {
// code for supporting browsers
}Note that Internet Explorer 11 does not support feature queries yet does support flexbox. If you decide the IE11 implementation is too buggy and you wish to serve it the fallback layout then you could use feature queries to serve flexbox rules only to those browsers with good flexbox support. Remember that if you want to include versions of browsers that had vendor-prefixed flexbox you would need to include the prefixed version in your feature query. The following feature query would include UC Browser, which supports feature queries and old flexbox syntax, prefixed:
@supports (display: flex) or (display: -webkit-box) {
// code for supporting browsers
}For more information about using Feature Queries see Using Feature Queries in CSS on the Mozilla Hacks blog.
Conclusion
While I’ve spent some time in this guide going through potential issues and fallbacks, flexbox is very much ready for you to be using in production work. This guide will help you in those cases where you do come across an issue or have the requirement to support older browsers.
Префиксы для flexbox CSS (кросбраузерный flexbox) — Блого-дарю
/*********************************
префиксы для flex-контейнера
*********************************/
.flex {
display: flex;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: inline-flex;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
flex-direction: column;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-flow: column wrap;
-webkit-flex-flow: column wrap;
-ms-flex-flow: column wrap;
justify-content: space-between;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
align-content: space-around;
-webkit-align-content: space-around;
-ms-flex-line-pack: distribute;
align-items: center
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
}
/******************************
префиксы для flex-элементов
******************************/
.flex-item {
flex-grow: 1;
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-ms-flex-positive: 1;
flex-shrink: 3;
-webkit-flex-shrink: 3;
-ms-flex-negative: 3;
flex-basis: 200px;
-webkit-flex-basis: 200px;
-ms-flex-preferred-size: 200px;
flex: 1 3 200px;
-webkit-box-flex: 1;
-webkit-flex: 1 3 200px;
-ms-flex: 1 3 200px;
align-self: center;
-webkit-align-self: center;
-ms-flex-item-align: center;
order: 3;
-webkit-box-ordinal-group: 3;
-webkit-order: 3;
-ms-flex-order: 3;
}