Flexbox – это новый макетный метод моделирования в CSS3. Предыдущая версия CSS имела четыре метода макетирования:
- Блок схема для макетирования документов;
- Линейная схема для моделирования текстов;
- Табличная схема для 2D табличных данных;
- Схема заданного позиционирования для точного расположения элементов.
Сейчас, вы, возможно, думаете «А как на счет методов позиционирования? Они часто используются для макетирования!» Хорошая идея, но методы позиционирования никогда не были предназначены для этого. CSS восстановил их из старого совместимого с ним атрибута в HTML. Умные веб-разработчики нашли им другие способы использования для создания сложных макетов, но они ограничены и к тому же глючат – подтвердит любой, кто боролся с методами очистки Сlearfix.
CSS3 ввел два новых метода компоновки в качестве альтернативного использования метода позиционирования и таблиц:
- Grid –компоновка, или макетирование, делит пространство на столбцы и строки. Как табличные схемы, но лучше! Спецификации Grid –компоновки все еще разрабатываются, и еще не готовы к использованию.
- Flexbox макетирование распределяет пространство вдоль одной строки или столбца. Как позиционирование, но лучше!Flexbox спецификации закончены и имеют отличную поддержку браузера на сегодняшний день.
Краткая история создания Flexbox
Пока я писал это, я понял, что на самом деле не знал, что побудило компьютерщиков создать новые методы верстки. Я написал Тэбу Аткинсу-младшему, автору Flexbox и Grid спецификаций, и он сказал мне следующее:
В конце августа, Mozilla попытался формализовать свою макетную модель XUL как Flexbox. Самый ранний проект, о котором я знаю, начался с 2009 года, но я думаю, что это началось еще раньше, в 2007 . Ничего особенного из этого не вышло; WebKit частично реализовал некоторые из тех элементов, и даже Firefox не соответствовал своей собственной спецификации, потому что все было крайне неспецифично.
Затем где-то в 2010 году я присоединился к WG (рабочая группа), и одно из первых, что я сделал, это снова начал использовать Flexbox, прежде настроив его. (Мне приказали, переделать всю эту проклятую штуку!) Через год или два после того, Microsoft предоставил свой первый проект спецификации Grid-схемы, и я, засучив рукава, взялся за это (переделал всю эту «проклятую штуку»).
Моя цель, пока я работал с Flexbox и позже с Grid, состояла в том, чтобы заменить все эти сумасшедшие позиции / таблицы / линейные схемы и прочую чепуху, которую мне пришлось освоить как веб-разработчику. Все это дерьмо было (а) глупым, (б) трудно запоминаемым, и (в) ограниченным миллионами раздражающими способами, и поэтому я хотел сделать несколько качественных макетных модулей, которые бы решали те же проблемы простыми, легкими в – использовании и доступными способами.
В двух словах: Flexbox и Grid были намеренно созданы, чтобы заменить метод позиционирования и табличную схему.
Есть (или нет) 3 Flexbox спецификации?
Вы, возможно, слышали о трех характеристиках Flexbox. (Которые напоминают мне об этой сцене из Star Trek :)
Не позволяйте ему напугать вас. Да, есть три версии спецификации, но только одна из них действительно имеет вес:
Старая, разработанная в 2009 году спецификация – display: box- это уже не актуально.
Спецификация «Tweener» 2011 года - display: flexbox – был в проекте в качестве спецификации, который реализовался только в IE10. Вы должны избегать его по возможности.
Последняя спецификация 2012 года- display: flex – это новая «звезда», с отличной поддержкой браузера (смотрите ниже).
Примечание: Каждая спецификация использует ключевое слово свойства дисплея, что означает, если вы читаете статью о Flexbox, легко выяснить, в какой версии спецификации они пишут. Если вы видите что-то еще, кроме display: flex, то это старая статья, и ее можно не читать.
Макеты Flexbox «идут в одном направлении»
Извините, глупая шутка.
Я сказал, что Flexbox располагает элементы в одной строке или столбце. Давайте поговорим о том, что это означает:
Макет Flexbox состоит из flex-контейнера, который содержит в себе flex-элементы. Flex- контейнер может располагаться горизонтально или вертикально. Его мы называем основная ось.
Прямые дочерние записи flex-контейнера выложены вдоль главной оси. Эти дочерние записи могут менять свои размеры и заполнить неиспользуемое пространство в контейнере, или могут уменьшиться, чтобы избежать выхода за пределы контейнера.
Соединив несколько flex-контейнеров в различных направлениях, вы можете создать сложные макеты.
Свойства Flexbox
У Flexbox слишком много свойств, чтобы разбирать их здесь, так что я отправлю вас в уникальное Руководство по Flexbox и хитростям CSS, который делает большую работу по внедрению всех свойств.
Не парьтесь! Есть много вариантов, но Flexbox включает в себя набор интеллектуальных значений по умолчанию, так что вы можете создать мощный макет при помощи очень небольшого кода. Вот, например:
.flex-container {
display: flex;
}Эта одна линия кода делает все следующее:
- Распознает .flex-контейнер как flex контейнер.
- Распознает все дочерние записи .flex-контейнера как flex элементы.
- Flex элементы будут расположены в виде горизонтальной линии.
- Flex элементы будут расположены в первоначальном порядке.
- Flex элементы будут расположены, начиная с левой стороны flex контейнера.
- Flex элементы будут иметь определенный размер в зависимости от постоянных свойств ширины.
- Если не хватает места для всех flex элементов, они будут сжиматься по горизонтали, пока все не поместятся.
- Если им нужно сжиматься, каждый элемент будет сокращаться в равной степени.
- Flex элементы будут все тянуться по вертикали, чтобы соответствовать высоте самого высокого flex элемента.
Правда, это совсем немного для одной строки CSS! Вы можете изменить любые из них, но я хотел бы дать вам вкусить, насколько мощным может быть Flexbox без дополнительной работы.
Поддержка браузеров
По состоянию на август 2015 года, поддержка браузера отличная! Текущие спецификации Flexbox полностью поддерживаются всеми современными браузерами, в том числе мобильными, IE11, и Edge.
Поддержка браузеров: Chrome 21+, Opera 12.1+, Firefox 22+, Safari 6.1+, IE 10+
Flexbox поддерживается во всех современных браузерах.
IE10 также поддерживает Flexbox, но использует Tweener спецификации (display: flexbox).
Что случится со старыми версиями IE?
У меня есть некоторые предположения.
В лучшем случае? Если вы не возражаете, браузеры non-Flexbox получат другую раскладку, и тогда вам не нужно ничего делать. Это называется «изящная деградация» и, конечно, самый простой подход.
Когда браузеры видят приказ, который они не понимают – как display:flex – они игнорируют его полностью. Это очень удобно для нас, потому что это означает, что все свойства Flexbox будут игнорироваться. Flex-контейнер и его элементы вернутся к значению по умолчанию, также и display:block.
В результате, браузеры non-Flexbox получат вертикально построенный макет мобильного стиля. Все содержание по-прежнему будет доступно и функционально, оно просто не будет выстроено так же, как современные браузеры.
«Изящная» деградация с Modernizr
Если это не будет работать, вы можете воспользоваться запасным, основанным на позиционировании макетом с использованием Modernizr. Modernizr – это библиотека JavaScript, которая оценивает возможности браузера и добавляет набор классов к элементам структуры, что позволяет вам определить рамки CSS основанные на функциональной поддержке.
Если браузер не поддерживает Flexbox, то будет добавлен класс.no-flexbox. Вот простой пример того, как ваш CSS будет выглядеть:
.parent { display: flex; }
.child { flex: 1; }
.no-flexbox {
.child { float: left; width: 50%; }
.parent::after {
@include clearfix();
}
}Преимущество этого подхода заключается в том, что ваш запасной код распространяется до класса .no-flexbox. В результате, когда приходит день, вы сможете отказаться от поддержки non-Flexbox браузеров, вы можете легко удалить весь код .no-flexbox и ваш сайт просто продолжает работать так же. И не требуется никакого рефакторинга.
Примечание касательно IE10: Тест flexbox в Modernizr 2.8.3 всегда возвращается в IE10 , что означает, что он не будет видеть резервные стили. Вы можете исправить это несколькими способами: IE10-специальный код в условных комментариях, используя инструмент Autoprefixer или просто с помощью Modernizr 3, который имеет улучшенный тест flexbox, который соответственно исключает IE10.
Выводы
Flexbox это способ макетного моделирования добавленный в CSS3, чтобы заменить несовершенные позиционные и табличные макеты. Он имеет набор интеллектуальных значений по умолчанию, которые позволяют легко создавать сложные макеты с относительно небольшим кодом. Он стабильный, легкий в использовании, и хорошо поддерживается браузерами.
Высоких конверсий!
