Хотя синтаксис может быть изначально Смешивающие факторы, flexbox ¹ живет до своего имени.Это создает интеллектуальные коробки, которые растяжению, податливый и способны изменить визуальный порядок.Это обеспечивает простые решения компоновочных парадигм, CSS всегда боролись с вертикальной: центрирование и равные высоты.Flex элементы действительно гостеприимны и приятно работать с .

Крис Coyier резюмирует flexbox __11 | 2 красиво:

Flexbox Layout Модуль (гибкий Box) (в настоящее время W3C Последний звонок Рабочий проект) направлен на обеспечение более эффективный способ выложить, выравнивать и распространять среди предметов пространство в контейнере, даже если их размер неизвестен, и / илидинамический (таким образом, слово “ flex”) .

Основная идея гибкого макета, чтобы дать контейнер возможность изменять ширину / высоту его элементы »(и порядок), чтобы наилучшим образом заполнить все доступное пространство (в основном для размещения для всех типов устройств отображения и размеры экрана).Flex контейнер расширяется, чтобы заполнить пункты свободное пространство, или сжимается их, чтобы предотвратить переполнение .

Flexbox действительно сияет HTML5 веб-приложений.Большинство веб-приложений состоят из ряда модульных, многократно используемых компонентов.Вы можете использовать flexbox для тех битов макета, которые вызывают головную боль и которые зависят от хрупкой CSS хаки для работы.Маленькие модули работают очень хорошо с flexbox, и вы можете использовать поплавки и другие инструменты для более широких слоев макета .

Я использую flexbox в большой путь для веб-приложение, что я в настоящее время работаю, и я очень доволен тем, как она обрабатывает компоновки и окно расчеты с умом.Я хотел бы поделиться некоторыми демо и примеры этого — любая обратная связь будет оценена .

Эта статья предполагает, что вы работать знания flexbox.Богатство информации доступны в Интернете.Имейте в виду, что спецификация претерпела несколько изменений на протяжении многих лет .

Есть три версии flexbox, в основном различаются по изменениям синтаксиса между 2009 и 2012:

1. New Синтаксис синхронно с текущей спецификации (например, display: flex) .
2. Tweener Синтаксис Синтаксис неофициальным с 2012 года, принимается только IE 10 (например, display: -ms-flexbox) .
3. Old Синтаксис с 2009 (например, display: box) .

Браузер Support

Давайте подробно рассмотрим, какие браузеры поддержки, которая синтаксис, любезно Can I Use ³ .

Браузеры, поддерживающие Новый Syntax

Рабочий стол:

• Префикса: Хром 29, Firefox 28, IE11, Opera 17
• Префикс: 4 ~ | префикс для Chrome 21, Safari 6.1, Opera 15

Примечание: Старые версии Firefox (22 до 27) поддерживает новый синтаксис минус flex-wrap 6 ~ и | свойства.Опера (12,1 и 17) поддерживает flexbox без префиксов производителей, но промежуточные версии 15 и 16 требуют префиксы .

Сенсорный:

• Префикса: Android 4.4, Opera Mobile 12.1, BlackBerry 10, хром для Android 39, Firefox для Android 33, IE 11 mobile
• Префикс: 4 ~ | префикс для прошивкой 7.1

Почти все браузеры, упомянутые выше, старые версии, которые поддерживают предварительное вариант flexbox, минус некоторые свойства, такие как flex-wrap 6 ~ и | (последний из которых является сокращение для flex-direction и flex-wrap недвижимость).Избегая flex-wrap (и, следовательно, с помощью flexbox в макеты нескольких строк), мы получаем потрясающую поддержку браузера, сливая старый и текущий синтаксис .

Браузеры, поддерживающие Tweener Syntax

Рабочий стол и сенсорный: есть 10 (с -ms- префикс поставщика)

Браузеры, поддерживающие Старый Syntax

Все эти настольных и сенсорных браузеров требуют -webkit- префикс поставщика (для Firefox, который нуждается ~ 15, за исключением | префикс) .

Рабочий стол: Firefox 2 – 21 Хром 4 – 20, Safari 3.1 – 6

Сенсорный: Android 2.1 – 4.3 прошивкой 3.2 – 6.1, UC Browser 9.9 Android, BlackBerry 7

Для современных браузеров, автообновление (т.е. обои для рабочего Chrome, Firefox, IE и Opera), новый синтаксис работает из коробки .

Браузеры, которые не поддерживают Flexbox

Рабочий стол: Старые версии IE (9) и Опера (12)

Сенсорный: Опера Mini

Если вы получаете запуганы числа префиксы и изменения в синтаксисе, посмотрите на recommendation__58 Криса Coyier в | 4 .

Вы также можете использовать следующие инструменты, чтобы получить лучшую поддержку браузера с помощью префиксы:

• Autoprefixer ⁵ С этого общего назначения инструмент для поставщика префикса, вы пишете CSS или использовать препроцессор, и это делает то, что нужно .
• Сасс flexbox mixins ⁶
• LessМЕНЬШЕ примесь поставляется в двух вариантах: with ⁷ и without ⁸ Tweener синтаксис IE 10 .

Я бы порекомендовал Autoprefixer среди них.Я не экспериментировал с другими препроцессора конкретных решений и приветствуем обратную связь, если у вас есть.Обратите внимание, что если вы используете подмешать с помощником библиотеки (например, Бурбон или Компас для Sass, СИБ для Stylus или менее Hat для меньше), он приходит построен в с поддержкой поставщика префикса для flexbox .

С инструментом как Autoprefixer, вы действительно получите большую поддержку по всем направлениям для flexbox, за исключением IE 9 и Opera Mini.Конечно, вы должны будете тщательно проверить ваше приложение во всех браузерах, чтобы убедиться, что различные синтаксические задержать .

Давайте посмотрим на несколько хороших прецедентов для flexbox с веб-приложения modules .

1. неизвестное число детей в течение Parent

Использование случай: Мое приложение имеет фильтры поиска.Количество поисковых фильтров зависит от того, пользователь подписан в Анонимные пользователи увидеть два фильтры (“Популярные” и “Последние”), в то время как зарегистрированны пользователи см четыре (“Избранное” и “Избранное”, дополнительно) .

Выпуск: Я хотел бы, чтобы приспособить стиль оба варианта, без каких-либо изменений в CSS .

Обсуждение: Ты как правило, имеют if заявление в шаблоне, чтобы для обработки состояние зарегистрированны пользователи.Если вы используете поплавки для макета, вы должны установить ширину 50% для фильтров для анонимных пользователей и ширину 25% для фильтров для зарегистрированны пользователи .

Решение: С flexbox, вы можете просто сделать родителю гибкий контейнер, объявив display: flex и дать детям свойство flex и значение 1, который сделал бы каждый из детейвзять одинаковую ширину внутри своего родителя.Так, CSS останется такой же, независимо от того вида.Помните, что flex недвижимость сокращение для flex-grow, flex-shrink и flex-basis ⁹ .

Демо:

Смотрите Flexbox: Родители с неизвестным количеством children __45 | 13 ¹⁰ Карен Менезес ( @ | imohkay__2 __55 | 62 ^{59 55 52 49 46 42 39 33 30 27 24 20 17 14 11} ) на CodePen __42 | 63 ^{60 56 53 50 47 43 40 34 31 28 25 21 18 15 12} .

Смотрите Pen Flexbox: Родители с неизвестным количеством children ^{13 10} Карен Менезес ( @ imohkay ^{62 59 55 52 49 46 42 39 33 30 27 24 20 17 14 11} ) на CodePen __37 | 63 ^{60 56 53 50 47 43 40 34 31 28 25 21 18 15 12} .

2. входа с Icons

Использование случай: Хочу добавить значимые значки моих форм входов .

Выпуск: Я хочу элегантный, гибкое решение, которое работает без объявления ненужные высоты и ширины на элементах .

Обсуждение: Этот классический проблема.Различные структуры фронтальных подойти к этому по-разному, как правило, с помощью display: table-cell или абсолютное позиционирование .

Решение: Вот flexbox путь.Все, что мы должны сделать, это обернуть вход и значок кроме него в родительском с display: flex.Затем мы применяем flex: 1 на вход, так что она занимает оставшееся пространство родителя, минус ширину иконы .

Demo (с помощью шрифта иконки Высокий шрифта через CDN для удобства):

Смотрите Pen Flexbox: входы с icons ^{19 16} Карен Менезес ( @ | imohkay__1 62 ⁵⁹ __13 | | 55__1 52 __21 | 49 ^{46 42 39 33 30 27 24 20 17 14 11} ) на CodePen ^{63 60 56 53 50 47 43 40 34 31 28 25 21 18 15 12} .

Смотрите Pen Flexbox: входы с icons ^{19 16} Карен Менезес ( @ imohkay ^{62 59 55 52 49 46 42 39 33 30 27 24 20 17 14 11} ) на CodePen __65 | 63 ^{60 56 53 50 47 43 40 34 31 28 25 21 18 15 12} .

3. Визуальный Order

Flexbox могут быть использованы для изменения визуального порядка документа, оставляя Заказать речи и навигации intact ²² в соответствии с порядком исходного документа.Наша работа, как разработчиками, чтобы responsibly использовать огромную силу механизмов упорядочения flexbox в .

На самом деле, мы можем структурировать наши документы с целью источникачто уместно вспомогательных технологий, таких как программы чтения с экрана (например, поставив врезку перед главным содержанием в исходном порядке), а также использование flexbox просто изменить визуальный порядок для тех, кто любит преимущества графического интерфейса пользователя (путем размещенияБоковая панель справа от основного содержания через order или flex-direction собственность).Давайте посмотрим на это в деталях .

А. Визуальный Независимости заказ с Flex-Direction

Использование случай: У меня есть боковая панель, расположенную справа от раздела основного содержания.На маленьких экранах, я хочу боковой, чтобы быть в верхней части основного содержания, обращая порядок .

Выпуск: я не хочу, чтобы изменить визуальный порядок в использовании технологию или хак .

Обсуждение: Flexbox агностик о порядке в макете.Это делает его чудесным инструментом для чувствительных макетов.Мы можем сделать это двумя способами: с помощью flex-direction недвижимость или order недвижимость.Давайте посмотрим на первый вариант здесь .

Решение: Давайте строить макет с боковой панели в качестве первого раздела в разметке.Это логично, по двум причинам: он придерживается принципа мобильного первой макета, и это выгодно для читателей экрана, потому что боковой панели ссылки сначала в исходном порядке.Давайте объявим flex-direction: column на родителей (потому что row это по умолчанию).В нашем медиа-запроса для больших экранов, мы изменим flex-direction до row-reverse, который решает вопрос наш .

В качестве бонуса, мы бросим в фиксированной ширины боковой панели (которая всегда 180 пикселей на больших экранах и полной ширины на мобильный) .

Демо:

Смотрите Flexbox: Боковая панель с независимостью заказа источника с использованием Flex-direction ^{26 23} Карен Менезес ( @ imohkay ^{62 59 55 52 49 46 42 39 33 30 27 24 20 17 14 11} ) на CodePen __17 | 63 ^{60 56 53 50 47 43 40 34 31 28 25 21 18 15 12} .

Смотрите Flexbox: Боковая панель с независимостью заказа источника с использованием Flex-direction __85 | 26 ²³ Карен Менезес ( @ imohkay ^{62 59 55 52 49 46 42 39 33 30 27 24 20 17 14 11} ) на CodePen ^{63 60 56 53 50 47 43 40 34 31 28 25 21 18 15 12} .

В. Визуальный Независимости Заказать с Приказом Property

Наша прецедент и вопрос такие же, как в приведенном выше примере .

Обсуждение: order свойство обеспечивает более точный контроль над визуальным порядка, чем flex-direction .

Решение: Мы объявим flex-direction: column на родителей, чтобы стек как столбцы на мобильный телефон.Затем, на min-width СМИ запроса, мы изменим flex-direction к row, который будет показывать боковую панель слева и основное содержание справа.Чтобы изменить порядок, мы просто объявить order: 1 по основному содержанию и order: 2 на боковой панели

Демо:

Смотрите Flexbox: Боковая панель с исходным независимости порядка использования order __97 | 32 ²⁹ Карен Менезес ( @ imohkay ^{62 59 55 52 49 46 42 39 33 30 27 24 20 17 14 11} ) на CodePen __45 | 63 ^{60 56 53 50 47 43 40 34 31 28 25 21 18 15 12} .

Смотрите Pen Flexbox: Sidebar с исходным независимости порядка использования order ^{32 29} Карен Менезес ( @ imohkay ^{62 59 55 52 49 46 42 39 33 30 27 24 20 17 14 11} ) на CodePen __38 | 63 ^{60 56 53 50 47 43 40 34 31 28 25 21 18 15 12} .

С Переключение Восхождение и спуск Order

Использование случай: Я хочу, чтобы отобразить список из пяти самых высокооплачиваемых актеров в Голливуде в 2013 году, что позволяет их для того, чтобы быть переключены .

Выпуск: Я хочу сделать это в чистом CSS, и я не могу объяснить, почему, но я не уверен, что это возможно даже .

Обсуждение: Это просто демо-нет JavaScript, чтобы показать, насколько мощным может быть flexbox.Возможно, немного непрактично и глупо, но давайте посмотрим, если есть способ .

Решение: Мы добавим вход флажок с метки, которые мы будем использовать для переключения заказ от низшего к высшему.Ниже этого, мы добавим список актеров.Использование :checked селектор псевдо-класса CSS, мы выбираем немедленного ul брат этого флажка для того, чтобы изменить направление элементов неупорядоченного списка в (с помощью flex-direction: column-reverse).Это странно, но это работает прекрасно, если вы не используете для чтения с экрана или клавиатуры для навигации.В приведенном ниже демо, установите флажок и использовать клавиатуру для навигации, чтобы увидеть последствия этого.Технические упоминает, что order свойство не влияет ни tabindex ни не-визуальные средства массовой информации, такие как речь . ³⁵ Таким образом, я не рекомендовал бы это решение для реальной проекта,Возможно, было бы пригодиться в быстром прототипа .

Примечание: Firefox имеет bug __10 | 36 в текущей версии (версия 34 на Ubuntu и Mac OS X, версия 33 на Windows), что приводит к tabindex соблюдения гибкого порядкаи не для того источника.Вы можете посмотреть на Тест | cases__1 __16 | 37 для CSS, предоставляющие Community Group .

Демо:

Смотрите Flexbox: Переключение на list’ с | order__1 __29 | 41 ³⁸ Карен Менезес ( @ imohkay ^{62 59 55 52 49
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров}