Хотя синтаксис может быть изначально Смешивающие факторы, flexbox 1 оправдывает свое название.Это создает интеллектуальные коробки, которые растяжению, гибкие и способны изменить визуальный порядок.Он обеспечивает простые решения для компоновки парадигм, CSS всегда боролись с: вертикальный центрирование и равные высоты.Flex элементы действительно гостеприимны и приятно работать с .
Крис Койьер резюмирует flexbox 2 красиво:
Flexbox Layout Модуль (гибкий Box) (в настоящее время W3C Last Call Рабочий проект) направлен на обеспечение более эффективный способ выложить, выравнивать и распространять пространство между статьями в контейнере, даже если их размер неизвестен, и / илидинамический (таким образом, слово “ flex”) .
Основная идея гибкого макета, чтобы дать контейнер возможность изменять ширину / высоту ее элементы ‘(и порядок), чтобы наилучшим заполнения доступного пространства (в основном для размещения для всех типов устройств отображения и размеров экрана).Flex контейнер расширяет предметы, чтобы заполнить свободное пространство, или уменьшает их, чтобы предотвратить переполнение .
Flexbox действительно сияет с HTML5 веб-приложений.Большинство веб-приложений состоят из ряда модульных, многократно используемых компонентов.Вы можете использовать flexbox для тех битов макета, которые вызывают головную боль и которые зависят от хрупкой CSS хаки для работы.Маленькие модули работают очень хорошо с flexbox, и вы можете использовать поплавки и другие инструменты для более широких слоев макета .
Я использую flexbox в большой путь для веб-приложение, которое я в настоящее время работаю, и я очень доволен тем, как она обрабатывает компоновки и окно расчеты с умом.Я хотел бы поделиться некоторыми демо и примеры этого — любая обратная связь была бы оценена .
Эта статья предполагает, что вы есть представление о flexbox.Богатство информации доступны в Интернете.Имейте в виду, что спецификация претерпела несколько изменений на протяжении многих лет .
Есть три версии flexbox, в основном, дифференцированные по изменениям синтаксиса между 2009 и 2012:
- New Синтаксис в синхронизации с текущей спецификации (например,
display: flex) . - Tweener Синтаксис неофициальный синтаксис с 2012 года, принимаются только с IE 10 (например,
display: -ms-flexbox) . - Old Синтаксис с 2009 года (например,
display: box) .
Браузер Support
Давайте подробно рассмотрим, какие браузеры поддержки, которая синтаксис, любезно я могу Use 3 .
Браузеры, которые поддерживают новую Syntax
Desktop:
- Префиксов: Chrome 29, Firefox 28, IE 11, Opera 17
- Префикс:
-webkit-префикс дляChrome 21, Safari 6.1, Opera 15
Примечание: Старые версии Firefox (от 22 до 27) поддерживает новый синтаксис минус flex-wrap и flex-flow свойства.Opera (12,1 и 17) поддерживает flexbox без префиксы, но промежуточные версии 15 и 16 требуют префиксы .
Touch:
- Префиксов: Android 4.4, Opera Mobile 12.1, BlackBerry 10, Chrome для Android 39, Firefox для Android 33, IE 11 mobile
- Префикс:
-webkit-префикс для прошивкой 7.1
Почти все браузеры, упомянутых выше, имеют старые версии, которые поддерживают предварительное вариант flexbox, за вычетом некоторых свойств, таких как flex-wrap и flex-flow (последний из которых является сокращение для flex-direction и flex-wrap свойства).Избегая flex-wrap (и, следовательно, используя flexbox В макетах из нескольких строк), мы получаем потрясающую поддержку браузера, сливая старый и текущий синтаксис .
Браузеры, которые поддерживают Tweener Syntax
Рабочий стол и штрих: IE 10 (с -ms- префикс продавец)
Браузерах, которые поддерживают Старый Syntax
Все эти настольных и сенсорных браузеров требуют -webkit- префикс поставщика (для Firefox, который нуждается в -moz- префикс) .
Desktop: Firefox 2 – 21, Chrome 4 – 20, Safari 3.1 – 6
Touch: Android 2.1 – 4.3 IOS 3.2 – 6,1, UC браузер 9,9 на Android, BlackBerry 7
Для современных браузеров, авто-обновление (т.е. обои для рабочего Chrome, Firefox, IE и Opera), новый синтаксис работает из коробки .
Браузеры, которые не поддерживают Flexbox
Desktop: Старые версии IE (9) и Opera (12)
Touch: Opera Mini
Если вы получаете запуганы числа префиксы и изменения в синтаксисе, посмотрите на recommendation__54 Крис Койьер в | 4 .
Вы также можете использовать следующие инструменты, чтобы получить наилучшую поддержку браузера с помощью префиксы:
- Autoprefixer 5 С этого общего назначения инструмент для поставщика префикса, вы пишете CSS или использовать препроцессор, и это делает то, что нужно .
- Sass flexbox mixins 6
- LessМЕНЬШЕ примесь поставляется в двух вариантах: with 7 и without 8 Tweener синтаксис для IE 10 .
Я бы порекомендовал Autoprefixer среди этих.Я не экспериментировал с другомпрепроцессора конкретных решений и приветствуется обратная связь, если у вас есть.Обратите внимание, что если вы используете смешения, с помощником библиотеки (такие как Бурбон или Компас для Sass, СИБ для Stylus или менее шляпа меньше), такая функция встроена в с поддержкой поставщика префикса для 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 9 .
Демо-ролик:
Смотрите Flexbox: Родители с неизвестным количеством children 10 Карен Менезес ( @ imohkay 38 34 31 27 21 18 14 11 ) на CodePen 39 35 32 28 22 19 15 12 .
2. Входы с Icons
Использования: Хочу добавить значимые значки моих входов форм .
Выпуск: Я хочу элегантный, гибкое решение, которое работает без объявления ненужные высоты и ширины на элементы .
Обсуждение: Это своего классическая проблема.Различные структуры фронтальных подойти к этому по-разному, обычно с использованием display: table-cell или абсолютное позиционирование .
Решение: Вот flexbox способ.Все, что нужно сделать, это обернуть вход и значок Помимо этого в родительском с display: flex.Тогда мы применяем flex: 1 к входу, так что она занимает все пространство родителя, минус ширину значок .
Demo (с использованием шрифтов иконки Высокий шрифта с помощью CDN для удобства):
Смотрите Flexbox: входы с icons 13 Карен Менезес ( @ imohkay 38 34 31 27 21 18 14 11 ) на CodePen 39 35 32 28 22 19 15 12 .
3. Визуальный Order
Flexbox может быть использована для изменения визуальный порядок документа, оставив Заказать речи и навигации intact 16 в соответствии с порядком исходного документа.Наша задача, как разработчиков, чтобы responsibly использовать огромную силу механизмов упорядочения flexbox в .
На самом деле, мы можем структурировать наши документы с исходном порядке, который соответствует вспомогательных технологий, таких как программы чтения с экрана (например, положить на боковой панели перед главным содержанием в исходном порядке), а также использовать flexbox просто изменить визуальный порядокдля тех, кто любит преимущества графического интерфейса пользователя (путем размещения на боковой панели справа от основного содержания через order или flex-direction собственность).Давайте посмотрим на это в деталях .
А. Визуальный Независимости заказ с Flex-Direction
Использования: У меня есть боковая панель, расположенную справа от раздела основного содержания.На маленьких экранах, я хочу боковой панели, чтобы быть в верхней части основного содержания, обращая порядок .
Выпуск: Я не хочу, чтобы изменить визуальное того, чтобы использовать наличие или хак .
Обсуждение: Flexbox агностик о порядке в макете.Это делает его чудесное средство для чувствительных макетов.Мы можем сделать это двумя способами: с помощью flex-direction недвижимость или order недвижимость.Давайте посмотрим на первый вариант здесь .
Решение: Давайте строить макет с боковой панели в качестве первого раздела в разметке.Это вполне логично, по двум причинам: он придерживается принципа мобильной первого макета, и это выгодно для чтения с экрана, потому что панели ссылок, находятся первые в порядке исходного кода.Давайте объявить flex-direction: column на родителей (потому что row по умолчанию).В нашем медиа-запроса для больших экранов, мы изменим flex-direction к row-reverse, который решает наш вопрос .
В качестве бонуса, мы бросим в фиксированной ширины боковой панели (которая всегда 180 пикселей на больших экранах и полной ширины на мобильный) .
Демо-ролик:
Смотрите Flexbox: Sidebar с независимостью заказа источника с использованием Flex-direction 17 Карен Менезес ( @ imohkay 38 34 31 27 21 18 14 11 ) на CodePen 39 35 32 28 22 19 15 12 .
В. Визуальная Независимости Заказать с порядком Property
Наше использование дело и вынести такие же, как и в предыдущем .
Обсуждение: order свойство обеспечивает более точный контроль над зрительным порядка, чем flex-direction .
Решение: Мы объявим flex-direction: column на родителей, чтобы стек как столбцы на мобильный телефон.Затем, на min-width СМИ запроса, мы изменим flex-direction к row, который покажет боковую панель слева и основное содержание справа.Чтобы изменить порядок, мы просто объявить order: 1 на основное содержание и order: 2 на боковой панели
Демо-ролик:
Смотрите Flexbox: Sidebar с исходным независимости заказ, используя order 20 Карен Менезес ( @ imohkay 38 34 31 27 21 18 14 11 ) на CodePen 39 35 32 28 22 19 15 12 .
С Переключение по возрастанию и убыванию Order
Использования: Я хочу, чтобы отобразить список из пяти самых высокооплачиваемых актеров в Голливуде в 2013 году, что позволяет их порядок, чтобы бытьпереключается .
Выпуск: Я хочу сделать это в чистом CSS и я не могу объяснить почему, но я не уверен, что это вообще возможно .
Обсуждение: Это простой демонстрационный не-JavaScript, чтобы показать, насколько мощным flexbox может быть.Возможно, немного непрактично и глупо, но давайте посмотрим, если есть способ .
Решение: Мы добавим вход Флажок с меткой, которую мы будем использовать для переключения заказ от низшего к высшему.Ниже этого, мы добавим список актеров.Использование :checked селектор псевдо-класса CSS, мы выбираем немедленного ul брат этого флажка для того, чтобы изменить направление пунктов маркированного списка в (с помощью flex-direction: column-reverse).Это странно, но это работает прекрасно, если вы не используете для чтения с экрана или клавиатуры для навигации.В приведенном ниже демо, установите флажок и использовать клавиатуру для, чтобы увидеть последствия этого.Спецификация упоминает, что order свойство влияет ни tabindex ни не-визуальные средства массовой информации, такие как речь . Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров