Начальная

Windows Commander

Far
WinNavigator
Frigate
Norton Commander
WinNC
Dos Navigator
Servant Salamander
Turbo Browser

Winamp, Skins, Plugins
Необходимые Утилиты
Текстовые редакторы
Юмор

File managers and best utilites

Освоение flexbox для современных веб-приложений. Поддержка flexbox браузерами


Освоение 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, процесс проектирования приложений станет для вас более простым, а таблицы стилей будут выглядеть красивее.

getinstance.info

CSS3 flexbox - описание всех свойств модуля, примеры верстки

CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов.

Flexbox состоит из flex-контейнера — родительского контейнера и flex-элементов — дочерних блоков. Дочерние элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

Модуль flexbox позволяет решать следующие задачи:

  • Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх;
  • Переопределять порядок отображения элементов;
  • Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство;
  • Решать проблему с горизонтальным и вертикальным центрированием;
  • Переносить элементы внутри контейнера, не допуская их переполнения;
  • Создавать колонки одинаковой высоты;
  • Создавать прижатый к низу страницы подвал сайта.

В основе flexbox лежит идея оси. Flexbox является инструментом двумерной компоновки и использует для работы две оси — горизонтальную (главную ось) и поперечную.

box-modelРис. 1. Модель flexbox

Что такое flexbox

Поддержка браузерами

IE: 11.0, 10.0 -ms-Firefox: 28.0, 18.0 -moz-Chrome: 29.0, 21.0 -webkit-Safari: 6.1 -webkit-Opera: 12.1 -webkit-iOS Safari: 7.0 -webkit-Opera Mini: 8Android Browser: 4.4, 4.1 -webkit-Chrome for Android: 44

1. Свойства flex-контейнера

Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для внутренних блоков не работают такие CSS-свойства, как float, clear, vertical-align. Также, на flex-контейнер не оказывают влияние свойства column-, создающие колонки в тексте и псевдоэлементы ::first-line и ::first-letter.

1.1. Свойство display

Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:

.flex-container { display: -webkit-flex; display: flex; /*отображает контейнер как блочный элемент*/ } .flex-container { display: -webkit-inline-flex; display: inline-flex; /*отображает контейнер как строчный элемент*/ }

После установки данных значений свойства каждый дочерний элемент автоматически становится flex-элементом, выстраиваясь в ряд (вдоль главной оси) колонками одинаковой высоты, равной высоте блока-контейнера. При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.

display-flexРис. 2. Выравнивание элементов в модели flexbox

Если родительский блок содержит текст или изображения без оберток, они становятся анонимными flex-элементами. Текст выравнивается по верхнему краю блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно деформируется.

1.2. Выравнивание элементов по горизонтали justify-content

Свойство выравнивает flex-элементы по ширине flex-контейнера, распределяя оставшееся свободное пространство, незанятое flex-элементами. Для выравнивания элементов по вертикали используется свойство align-content. Свойство не наследуется.

justify-content
Значения:
flex-start Значение по умолчанию. Flex-элементы позиционируются от начала flex-контейнера.
flex-end Flex-элементы позиционируются относительно правой границы flex-контейнера.
center Flex-элементы выравниваются по центру flex-контейнера.
space-between Flex-элементы выравниваются по главной оси, свободное место между ними распределяется следующим образом: первый блок располагается в начале flex-контейнера, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве, а свободное пространство равномерно распределяется между элементами.
space-around Flex-элементы выравниваются по главной оси, а свободное место делится поровну, добавляя отступы справа и слева.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
justify-contentРис. 3. Выравнивание элементов и распределение свободного пространства с помощью свойства justify-content

Синтаксис

.flex-container { display: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start; }
1.3. Выравнивание элементов по вертикали align-items

Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по перпендикулярной оси (по высоте). Не наследуется.

align-items
Значения:
stretch Значение по умолчанию. Flex-элементы растягиваются, занимая все пространство по высоте.
flex-start Flex-элементы выравниваются по левому краю flex-контейнера относительно верхнего края блока-контейнера.
flex-end Flex-элементы выравниваются по левому краю flex-контейнера относительно нижнего края блока-контейнера.
center Flex-элементы выравниваются по центру flex-контейнера.
baseline Flex-элементы выравниваются по базовой линии.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
align-itemsРис. 4. Выравнивание элементов в контейнере по вертикали

Синтаксис

.flex-container { display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; }
1.4. Направление главной оси flex-direction

Свойство определяет, каким образом flex-элементы укладываются во flex-контейнере, задавая направление главной оси flex-контейнера. Они могут располагаться в двух главных направлениях — горизонтально, как строки или вертикально, как колонки. Главная ось по умолчанию идет слева направо. Поперечная – сверху вниз. Свойство не наследуется.

flex-direction
Значения:
row Значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку. Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) инлайн оси (inline-axis).
row-reverse Направление справа налево (в rtl слева направо). Flex-элементы выкладываются в строку относительно правого края контейнера (в rtl — левого).
column Направление сверху вниз. Flex-элементы выкладываются в колонку.
column-reverse Колонка с элементами в обратном порядке, снизу вверх.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
flex-directionРис. 5. Свойство flex-direction для блочных и строчных элементов

Синтаксис

.flex-container { display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; }
1.5. Многострочность элементов flex-wrap

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

flex-wrap
Значения:
nowrap Значение по умолчанию. Flex-элементы не переносятся, а располагаются в одну линию слева направо (в rtl справа налево).
wrap Flex-элементы переносятся, располагаясь в несколько горизонтальных рядов (если не помещаются в один ряд) в направлении слева направо (в rtl справа налево).
wrap-reverse Flex-элементы переносятся, располагаясь в обратном порядке слева-направо, при этом перенос происходит снизу вверх.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
flex-wrapРис. 6. Управление многострочностью с помощью свойства flex-wrap

Синтаксис

.flex-container { display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; }
1.6. Краткая запись направления и многострочности flex-flow

Свойство предоставляет возможность в одном свойстве задать направление главной оси и многострочность поперечной оси, т.е. сокращённая запись свойств flex-direction и flex-wrap. Значение по умолчанию flex-flow: row nowrap;. Не наследуется.

flex-flow
Значения:
направление Указывает направление главной оси. Значение по умолчанию row.
многострочность Задаёт многострочность поперечной оси. Значение по умолчанию nowrap.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; display: flex; flex-flow: row wrap; }
1.7. Многострочное выравнивание align-content

Свойство выравнивает строки flex-элементов по вертикали во flex-контейнере, позволяя управлять свободным пространством.Свойство работает только в случае, если разрешен перенос строк и указано направление flex-flow: row/row-reverse/column/column-reverse wrap/wrap-reverse; и высота flex-контейнера. Не наследуется.

align-content
Значения:
stretch Значение по умолчанию. Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство.
flex-start Строки flex-элементов выравниваются по левому краю flex-контейнера относительно верхнего края блока-контейнера.
flex-end Строки flex-элементов выравниваются по левому краю flex-контейнера относительно нижнего края блока-контейнера.
center Строки flex-элементов выравниваются по высоте по середине flex-контейнера относительно его левого края.
space-between Строки flex-элементов выравниваются по высоте по середине flex-контейнера относительно его левого края. Свободное пространство распределяется между ними. Первый ряд flex-элементов прижимается к началу flex-контейнера, последний ряд — к нижнему краю.
space-around Строки flex-элементов равномерно распределяются по высоте, свободное пространство добавляется сверху и снизу строки.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
align-contentРис. 7. Многострочное выравнивание flex-элементов

Синтаксис

.flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end; height: 100px; }

2. Свойства flex-элементов

2.1. Порядок отображения элементов order

Свойство определяет порядок, в котором flex-элементы отображаются внутри flex-контейнера. По умолчанию для всех flex-элементов задан порядок order: 0; и они следуют друг за другом по мере добавления во flex-контейнер. Самый первый flex-элемент по умолчанию расположен слева. Чтобы поставить любой flex-элемент в начало строки, ему нужно назначить order: -1;, в конец строки — order: 1;. Свойство не наследуется.

order
Значения:
число Свойство задается целым числом, отвечающим за порядок отображения flex-элементов. Значение по умолчанию 0.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-order: 1; order: 1; } orderРис. 8. Порядок отображения flex-элементов
2.2. Базовая ширина элемента flex-basis

Свойство позволяет задать базовую ширину flex-элемента, относительно которой будет происходить растяжение flex-grow или сужение flex-shrink элемента. Не наследуется.

flex-basis
Значения:
auto Значение по умолчанию. Элемент получает базовую ширину, соответствующую ширине контента внутри него, если она не задана явно.
число Ширина элемента задается в px, %, em и других единицах измерения.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-basis: 100px; flex-basis: 100px; }
2.3. Растяжение элементов flex-grow

Свойство определяет коэффициент увеличения ширины flex-элемента относительно других flex-элементов. Свойство не наследуется.

flex-grow
Значения:
число Положительное целое или дробное число, устанавливающее коэффициент увеличения flex-элемента. Значение по умолчанию 0.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
flex-growРис. 10. Растяжение flex-элементов в строке

Синтаксис

.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-grow: 3; flex-grow: 3; }
2.4. Сужение элементов flex-shrink

Свойство указывает коэффициент уменьшения ширины flex-элемента относительно других flex-элементов. Работает только если для элемента задана ширина с помощью свойства flex-basis или width. Свойство не наследуется.

flex-shrink
Значения:
число Положительное целое или дробное число, устанавливающее коэффициент уменьшения flex-элемента. Значение по умолчанию 1.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
flex-shrinkРис. 11. Сужение flex-элементов в строке

Синтаксис

.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-shrink: 3; flex-shrink: 3; }
2.5. Задание базовой ширины и трансформации элемента одним свойством flex

Свойство представляет собой сокращённую запись свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию: flex: 0 1 auto;. Можно указывать как одно, так и все три значения свойств. Свойство не наследуется.

W3C рекомендует использовать сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.

flex
Значения:
коэффициент растяжения Коэффициент увеличения ширины flex-элемента относительно других flex-элементов.
коэффициент сужения Коэффициент уменьшения ширины flex-элемента относительно других flex-элементов.
базовая ширина Базовая ширина flex-элемента.
auto Эквивалентно flex: 1 1 auto;.
none Эквивалентно flex: 0 0 auto;.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px; }
2.6. Выравнивание отдельных элементов align-self

Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание, заданное align-items. Не наследуется.

align-self
Значения:
auto Значение по умолчанию. Flex-элемент использует выравнивание, указанное в свойстве align-items flex-контейнера.
flex-start Flex-элемент выравнивается по верхнему краю flex-контейнера, относительно левой границы.
flex-end Flex-элемент выравнивается по нижнему краю flex-контейнера, относительно левой границы.
center Flex-элемент выравнивается по высоте по середине flex-контейнера, относительно левой границы.
baseline Flex-элемент выравнивается по базовой линии flex-контейнера, относительно левой границы.
stretch Flex-элемент растягивается на всю высоту flex-контейнера, при этом учитываются поля и отступы.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
align-selfРис. 12. Выравнивание отдельных flex-элементов

Синтаксис

.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-align-self: center; align-self: center; }

html5book.ru

Префиксы для 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;

}

blogo-daru.ru

Визуальное руководство по свойствам Flexbox из CSS3 — CSS-LIVE

Перевод статьи A Visual Guide to CSS3 Flexbox Properties с сайта scotch.io, c разрешения автора— Димитара Стоянова.

Раскладка Flexbox, официально названная CSS-модуль раскладки гибких боксов – новый раскладочный модуль в CSS3, созданный для улучшения выравнивания, направления и порядка элементов в контейнере, даже когда их размер неизвестен или меняется динамически. Основная характерная черта flex-контейнера — это способность изменять ширину или высоту своих дочерних элементов, чтобы как можно лучше заполнить доступную область на экранах разной ширины.

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

Вместо того, чтобы объяснять, как работают flex-свойства, это руководство сосредоточится на том, как flex-свойства влияют на раскладку визуально.

Основы

Прежде чем начать описание свойств flexbox, давайте немного познакомимся с основами модели flexbox. Flex-раскладка состоит из родительского контейнера, именуемого flex-контейнером, и его непосредственных дочерних элементов – flex-элементов.

CSS3-Flexbox-Model

На схеме выше представлены свойства и терминология, которая используется для описания flex-контейнера и его дочерних элементов. Для получения более подробной информации об их значении читайте в официальной спецификации модели flexbox на W3C.

Flexbox-раскладка прошла через многие итерации и несколько изменений синтаксиса по сравнению с исходным черновиком из 2009-го, поэтому, чтобы избежать путаницы, для ясности, мы будем использовать синтаксис только из последнего рабочего черновика (сентябрь 2014). Если вам нужна совместимость со старыми браузерами, то прочитайте эту статью о том, как сделать это наилучшим образом.

Браузеры с поддержкой последней спецификации flexbox:

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+ (с префиксом -webkit-)
  • Android 4.4+
  • iOS 7.1+ (с префиксом -webkit-)

Более детальную поддержку и совместимость с браузерами можно посмотреть здесь.

Применение

Чтобы запустить механизм flexbox-раскладки, просто установите свойство display для родительского HTML-элемента:

.flex-container { display: -webkit-flex; /* Safari */ display: flex; }

Или если вам нужно отобразить его как строчный элемент, то используйте:

.flex-container { display: -webkit-inline-flex; /* Safari */ display: inline-flex; }

Замечание: это свойство нужно установить только для родительского контейнера и все его непосредственные дочерние элементы автоматически станут flex-элементами.

Есть несколько способов сгруппировать свойства flexbox и безусловно самый лёгкий способ, который я обнаружил, чтобы понять возможности flexbox и их использование – это разделить их на две группы, одну для flex-контейнера, а другую для flex-элементов. Ниже объясняется всё о них и то, как они влияют на раскладку визуально.

Свойства flexbox для контейнера

flex-direction

Это свойство указывает, как flex-элементы выкладываются во flex-контейнере, путём установки направления главной оси flex-контейнера. Они могут выкладываться в двух главных направлениях, горизонтально, как строки и вертикально, как колонки.

Значения:

.flex-container { -webkit-flex-direction: row; /* Safari */ flex-direction: row; }

С направлением row flex-элементы укладываются в ряд слева направо в ltr-контексте.

flexbox-flex-direction-row

.flex-container { -webkit-flex-direction: row-reverse; /* Safari */ flex-direction: row-reverse; }

С направлением row-reverse flex-элементы укладываются в ряд справа налево в ltr-контексте.

flexbox-flex-direction-row-reverse

.flex-container { -webkit-flex-direction: column; /* Safari */ flex-direction: column; }

С направлением column flex-элементы укладываются в колонку сверху вниз.

flexbox-flex-direction-column

.flex-container { -webkit-flex-direction: column-reverse; /* Safari */ flex-direction: column-reverse; }

С направлением column-reverse flex-элементы укладываются в колонку снизу вверх.

flexbox-flex-direction-column-reverse

Свойство по умолчанию: row

Замечание: row и row-reverse зависят от режима письма, поэтому в rtl-контексте они соответственно будут перевёрнуты.

flex-wrap

Первоначальная идея flexbox — контейнер для установки его элементов в одну единственную строку. Свойство flex-wrap управляет тем, как flex-контейнер будет выкладывать свои элементы — в одну строку или в несколько, и направлением, в котором будут укладываться новые строки.

Значения:

.flex-container { -webkit-flex-wrap: nowrap; /* Safari */ flex-wrap: nowrap; }

Flex-элементы отображаются в один ряд, по умолчанию они сужаются, чтобы уместиться в ширину flex-контейнера.

flexbox-flex-wrap-nowrap

.flex-container { -webkit-flex-wrap: wrap; /* Safari */ flex-wrap: wrap; }

Flex-элементы отображаются в несколько рядов, если потребуется, слева направо и сверху вниз.

flexbox-flex-wrap-wrap

.flex-container { -webkit-flex-wrap: wrap-reverse; /* Safari */ flex-wrap: wrap-reverse; }

Flex-элементы отображаются в несколько рядов, если потребуется, слева направо и снизу вверх.

flexbox-flex-wrap-wrap-reverse

Значение по умолчанию: nowrap

Замечание: эти свойства зависят от режима письма, поэтому в rtl-контексте они соответственно будут перевёрнуты.

flex-flow

Это свойство – сокращённая запись для свойств flex-direction и flex-wrap.

Значения:

.flex-container { -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */ flex-flow: <flex-direction> || <flex-wrap>;

Значение по умолчанию: row nowrap

justify-content

Свойство justify-content выравнивает flex-элементы по главной оси текущей строки flex-контейнера. Оно помогает распределить оставшееся свободное пространство, в случаях, если все flex-элементы в строке негибкие, или гибкие, но достигли своего максимального размера.

Значения:

.flex-container { -webkit-justify-content: flex-start; /* Safari */ justify-content: flex-start; }

Flex-элементы выравниваются по левой стороне flex-контейнера в контексте ltr.

flexbox-justify-content-flex-start

.flex-container { -webkit-justify-content: flex-end; /* Safari */ justify-content: flex-end; }

Flex-элементы выравниваются по правой стороне flex-контейнера в контексте ltr.

flexbox-justify-content-flex-end

.flex-container { -webkit-justify-content: center; /* Safari */ justify-content: center; }

Flex-элементы выравниваются по центру flex-контейнера.

flexbox-justify-content-center

.flex-container { -webkit-justify-content: space-between; /* Safari */ justify-content: space-between; }

Flex-элементы отображаются с равным интервалом между ними, а первый и последний flex-элементы выравниваются по краям flex-контейнера.

flexbox-justify-content-space-between

.flex-container { -webkit-justify-content: space-around; /* Safari */ justify-content: space-around; }

Flex-элементы отображаются с равным интервалом вокруг каждого flex-элемента, включая первый и последний flex-элементы.

flexbox-justify-content-space-around

Значение по умолчанию: flex-start

align-items

Flex-элементы могут быть выровнены вдоль поперечной оси текущей строки flex-контейнера, подобно justify-content, но в перпендикулярном направлении. Это свойство устанавливает выравнивание по умолчанию для всех flex-элементов, в том числе и для анонимных flex-элементов.

Значения:

.flex-container { -webkit-align-items: stretch; /* Safari */ align-items: stretch; }

Flex-элементы заполняют всю высоту (или ширину) от поперечного начала к поперечному концу flex-контейнера.

flexbox-align-items-stretch

.flex-container { -webkit-align-items: flex-start; /* Safari */ align-items: flex-start; }

Flex-элементы прижимаются к поперечному началу flex-контейнера.

flexbox-align-items-flex-start

.flex-container { -webkit-align-items: flex-end; /* Safari */ align-items: flex-end; }

Flex-элементы прижимаются к поперечному концу flex-контейнера.

flexbox-align-items-flex-end

.flex-container { -webkit-align-items: center; /* Safari */ align-items: center; }

Flex-элементы укладываются по центру поперечной оси flex-контейнера.

flexbox-align-items-center

.flex-container { -webkit-align-items: baseline; /* Safari */ align-items: baseline; }

Flex-элементы выравниваются по базовой линии.

flexbox-align-items-baseline

Значение по умолчанию: stretch

Замечание: более подробно о том, как высчитывается базовая линия, можно почитать здесь.

align-content

Свойство align-content выравнивает строки flex-контейнера во flex-контейнере, когда есть дополнительное пространство по поперечной оси, подобно тому, как justify-content выравнивает отдельные элементы по главной оси.

Значения:

.flex-container { -webkit-align-content: stretch; /* Safari */ align-content: stretch; }

Flex-элементы отображаются с распределённым пространством после каждого ряда flex-элементов.

flexbox-align-content-stretch

(прим. перев.: такая картина, как на рисунке, будет только при значении align-items: flex-start. Корректнее было бы сказать, что align-content: stretch поровну делит общую высоту контейнера между всеми строками флекс-элементов, а внутри каждой строки они выравниватся с помощью align-items, так же как и в случае одной строки.)

.flex-container { -webkit-align-content: flex-start; /* Safari */ align-content: flex-start; }

Ряды flex-элементы прижаты к поперечному началу flex-контейнера.

flexbox-align-content-flex-start

.flex-container { -webkit-align-content: flex-end; /* Safari */ align-content: flex-end; }

Ряды flex-элементы прижаты к поперечному концу flex-контейнера.

flexbox-align-content-flex-end

.flex-container { -webkit-align-content: center; /* Safari */ align-content: center; }

Ряды flex-элементов укладываются по центру поперечной оси flex-контейнера.

flexbox-align-content-center

.flex-container { -webkit-align-content: space-between; /* Safari */ align-content: space-between; }

Ряды flex-элементов отображаются с равным интервалом между ними, а первый и последний ряд выравнивается по краям flex-контейнера.

flexbox-align-content-space-between

.flex-container { -webkit-align-content: space-around; /* Safari */ align-content: space-around; }

Flex-элементы отображаются с равным интервалом вокруг каждого ряда flex-элементов.

flexbox-align-content-space-around

Значение по умолчанию: stretch

Замечание: это свойство работает только в случае, если flex-контейнер содержит несколько строк flex-элементов. Если элементы размещены в единственной строке, то это свойство не влияет на раскладку.

Замечания для flex-контейнеров

  • любые свойства column-* не влияют на flex-контейнер.
  • псевдоэлементы ::first-line and ::first-letter не применяются к flex-контейнеру.

Свойства flexbox для элемента

order

Свойство order определяют порядок, в котором дочерние элементы flex-контейнера появляются внутри него. По умолчанию, flex-элементы следуют один за другим по мере добавления во flex-контейнер.

Значения:

.flex-item { -webkit-order: <целое число>; /* Safari */ order: <целое число>; }

Flex-элементы могут быть упорядочены при помощи этого простого свойства, без изменения структуры HTML-кода.

flexbox-order

Значение по умолчанию: 0

flex-grow

Это свойство указывает фактор растягивания flex-элемента, который определяет, насколько будет растянут flex-элемент относительно оставшихся flex-элементов во flex-контейнере при распределении положительного свободного пространства.

Значения:

.flex-item { -webkit-flex-grow: <число>; /* Safari */ flex-grow: <число>; }

Если всем flex-элементам задано одно и тоже значение flex-grow, тогда все элементы в контейнере будут одинакового размера.

flexbox-flex-grow-1

Второй flex-элемент занимает больше места относительно размера других flex-элементов.

flexbox-flex-grow-2

Значение по умолчанию: 0

Замечание: отрицательные значения игнорируются.

flex-shrink

Свойство flex-shrink указывает фактор гибкого растягивания, который определяет, насколько будет сужен flex-элемент относительно оставшихся flex-элементов во flex-контейнере при распределении отрицательного свободного пространства.

Значения:

.flex-item { -webkit-flex-shrink: <число>; /* Safari */ flex-shrink: <число>; }

По умолчанию любые flex-элементы могут быть сужены, но если мы установим значение flex-shrink в 0 (не сужаются), то они сохранят первоначальный размер.

flexbox-flex-shrink

Значение по умолчанию: 1

Замечание: отрицательные значения игнорируются.

flex-basis

Это свойство принимает те же самые значения, что width and height, и указывает исходный главный размер flex-элемента, прежде чем свободное пространство распределится в соответствии с факторами гибкости.

Значения:

.flex-item { -webkit-flex-basis: auto | <ширина>; /* Safari */ flex-basis: auto | <ширина>; }

flex-basis указывается для 4-го flex-элемента и диктует его исходный размер.

flexbox-flex-basis

Значение по умолчанию: auto

Замечание: есть проблема именования со значением auto, которая будет решена в будущем.

Прим. перев. в текущем редакторском черновике предлагается решить проблему с помощью введения дополнительного значения content: c этим значением базовый главный размер будет определяться по содержимому, а со значением auto — по значению свойства главного размера (width или height в зависимости от flex-direction)

flex

Это свойство – сокращённая запись для свойств flex-grow, flex-shrink и flex-basis. Наряду с другими значениями, его можно установить также в auto (1 1 auto) и none (0 0 auto).

.flex-item { -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */ flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; }

Значение по умолчанию: 0 1 auto

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

align-self

Свойство align-self переопределяет выравнивание по умолчанию (или то, что указано в align-items) для отдельных flex-элементов. Для понимания доступных значений смотрите пояснения align-items для flex-контейнера.

Значения:

.flex-item { -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */ align-self: auto | flex-start | flex-end | center | baseline | stretch; }

Для 3-го и 4-го элемента переопределено выравнивание при помощи свойства align-self.

flexbox-align-self

Значение по умолчанию: auto

Замечание: значение auto для align-self вычисляется как значение align-items родительского элемента, либо stretch, если родительского элемента нет.

Замечания для flex-элементов

  • float, clear и vertical-align не влияют на flex-элемент и не вырывают его из потока.

Игровая площадка с Flexbox

Здесь представлена площадка для игр с flexbox, где можно поиграть с различными flex-свойствами и изучить силу раскладки flexbox. Комбинируйте некоторые flex-свойства, чтобы получить сложные раскладки.

See the Pen yNNZxr by Ilya Streltsyn (@SelenIT) on CodePen.

Также можно увидеть эту игровую площадку в полноэкранном примере здесь, или получить исходный код на GitHub.

P.S. Это тоже может быть интересно:

css-live.ru

Flexbox · Bootstrap

В Bootstrap наконец то появилась поддержка Flexbox. Подписаться на новые CSS разметка стили с движением переменной или поменять в таблице стилей.

Содержание

Что входит

Flexbox поддержка доступна по ряду Bootstrap компоненты:

  • Всего блочная система (миксины и предопределенные классы), которые включают от floats к display: flex;.
  • Входные группы, которые движутся от display: table; для display: flex;.
  • В медиа компоненте движется от display: table; и ряд ломаные стили для простого display: flex;.

Вендорных префиксов представлены в нашем составитель CSS С Autoprefixer через Grunt. Некоторые ошибки в ie10-11-х Flexbox реализация обойти с помощью postcss-flexbugs-fixes.

Почему flexbox?

В двух словах, flexbox обеспечивает более простым и гибким разметка параметры CSS. Более конкретно, оно обеспечивает:

  • Простое вертикальное выравнивание содержания в родительском элементе.
  • Легко переупорядочивание содержимого на различных устройствах и разрешениях экрана с помощью медиа запросов.
  • Просто CSS-only равной высоте колонок для грид основе разметки.

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

Как это работает

Если вы знакомы с изменение переменных Sass—или любой другой CSS препроцессора—вы будете прямо у себя дома, чтобы переехать в flexbox режиме.

  1. Откройте _variables.scss файл и найдите $enable-flex переменную.
  2. Измените его с false для true.
  3. Перекомпилируйте, и готово!

Кроме того, если вам не нужен исходный код Sass файлов, можно поменять по умолчанию значение Bootstrap составлено CSS с собранным flexbox вариации. Перейдите на страницу загрузок для получения дополнительной информации.

Поддержка браузеров

Позволяя flexbox означает уменьшена поддержка браузеров и устройств:

  • Internet Explorer 9 и ниже не поддерживают flexbox.
  • Internet Explorer 10 имеет некоторые причуды (см. раздел “известные проблемы” на вкладке в Я могу использовать...), требует использования префикса, и поддерживает только синтаксис от старой, 2012 версии спецификаций.

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

getbootstrap.ru

Особенности –webkit-box или как «подружить» flexbox со старыми Safari / Хабр

Уверен, многие Front End Developer-ы постоянно сталкиваются с проблемой поддержки flexbox в старых версиях популярных браузеров. Среди них выделяются два явных фаворита – Internet Explorer (IE) и Safari. С IE всё проще, т.к. flex поддерживается в версиях 10.0+. Версии ниже уже не актуальны, поэтому их часто игнорируют. В Safari же ситуация иная, поскольку поддержка современной спецификации flexbox (по мнению Caniuse.com) начинается с версии IOS Safari 9.2+.

Проблема именно в этом! Ведь по статистике Apple, только 47% обладателей iPhone имеют возможность использовать Safari 9.2+.

А что делать остальным?

Если мы делаем красивый, качественный и суперадаптивный сайт, построенный на flexbox — так же красиво и качественно он будет отображаться только на устройствах, которые его грамотно интерпретируют.

На помощь в этом приходит так называемый старый синтаксис flexbox – display: box; Это аналог свойства display: flex; только он поддерживается всеми Safari, начиная с версии 5.0+.

Однако всё не так просто:

  1. Display: box работает только с префиксами, в данном случае с -webkit- (display: -webk2) it-box;).
  2. Странно работает с float.
  3. Аналогов некоторым современным свойствам нет.
Это те ошибки, которые отловил лично я. В будущем список будет пополняться.

Как же решить уже найденные проблемы?

Прописываем вендорные префиксы для box и связанным свойствам. Обтекания внутри box прячут элементы.

Эту ошибку пофиксить легко. Достаточно элементам, имеющим float, добавить свойство position: relative.

Почему бы просто не убрать float? – А вот почему:

Я приведу список всех рабочих аналогов flex-свойств и box-свойств:

-webkit-box-orient (flex-direction) – направление оси элементов.

Бывает нескольких видов в случае нового синтаксиса:

— column – колонка; — row (по умолчанию) – строка; — row-reverse – реверсия строки; — column-reverse – реверсия колонки.

В случае старого синтаксиса я использую всего два свойства:

— vertical – колонка; — horizontal – строка.

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

Для реверса есть свойство -webkit-box-direction, которое имеет 2 значения – normal и reverse.

-webkit-box-pack (justify-content) – задает выравнивание по горизонтали.

Новый синтаксис:

— flex-start, flex-end – элементы прижаты к началу/концу родителя; — space-between – распределяет элементы равномерно внутри родителя, не оставляя при этом боковых отступов; — center – центрирует элементы.

Старый синтаксис:

— start, end – аналог flex-start, flex-end; — justify – аналог space-between; — center – то же, что и center в новом.

У space-around НЕТ аналога!

-webkit-box-align (align-items) – выравнивание по вертикали. По праву могу назвать это одним из главных достоинств flexbox.

Новый синтаксис:

— flex-start, flex-end – элементы прижаты к верху/низу родителя; — baseline – дефолтное значение, выравнивание по базовой линии шрифта без учета свисаний; — center – центрирует элементы; — stretch – растягивает дочерние блоки по высоте.

Старый синтаксис:

— start, end – аналог flex-start, flex-end.

Остальные свойства идентичны

-webkit-box-ordinal-group (order) – определяет порядковый номер элемента в группе. В обоих случаях задается цифрой.

Других вариантов либо нет, либо они не работают. Например:

-webkit-box-lines – это, по идее, аналог свойства flex-wrap, но у меня он почему-то не работает.

И напоследок.

Если вам нужно применить любое CSS-свойство только для -webkit-, можете использовать рабочий CSS-хак. Он проверен и он РАБОТАЕТ:

@media all and (-webkit-min-device-pixel-ratio:0) { /*Всё, что вы сюда напишете, будет работать только с -webkit-*/ } Делитесь своим опытом и удачи!

Автор статьи: Виктор Рябовол

habr.com

Изучаем Flexbox | Кабинет Веб-мастера

Изучаем Flexbox

Технологии не стоят на месте и мир высоких технологий развивается очень быстро. Тяжело успевать за техническим прогрессом и быть в курсе всех изменений.

Сегодня мы будем изучать долгожданное нововведение всех вебмастеров - Flexbox-лейаут или гибкие блоки.

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

Начнем разбираться по порядку.

Для просмотра этой статьи и использования этих технологий, используйте современные браузеры

Поддержка браузерами: Google Chrome 21+, Opera 12.1+, Mozilla FireFox 22+, IE 10+, Safari 3+, Android 2.1+, iOS 3.2+.

Создадим простую структуру:

<div> <div>100500</div> <div>2</div> <div>3</div> </div>

1 контейнер и 3 дочерних элемента. С этими элементами мы будем выполнять все манипуляции. Структура изменяться не будет, поэтому в дальнейшем буду приводить изменения только стилей css.

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

display:flex

Применяется к родительскому элементу. Определяет родительский элемент как блочный.

Поэтому добавим базовые стили, которые определят, что используемые нами элементы относятся к теме статьи:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }

В результате мы получим вот такую картинку:

Изучаем Flexbox

При этом контейнер будет занимать всю доступную ширину (так как свойство display:flex определяет элемент как блочный) - для примера, ограничил ширину - 760px, а дочерние элементы занимают ширину по содержимому.

Если мы зададим родителю свойство display:inline-flex, то это определит родителя как блок-инлайновый элемент (при этом результат не изменится), родитель будет занимать ширину по содержимому (а вести себя как display:inline-block).

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

.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; flex-direction:row-reverse; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }

Изучаем Flexbox

Теперь элементы располагаются справа-налево. И первый дочерний элемент стоит справа. (Если направление текста изменено для всех страницы на обратное - справа налево rtl, вместо ltr - то все свойства выравнивания - это и далее - работают наоборот).

flex-direction

Применяется к родительскому элементу. Устанавливает направление дочерних flex элементов.

Все доступные варианты выравнивания для свойства flex-direction:

  • row (по умолчанию): слева направо для ltr, справа налево для rtl
  • row-reverse: справа налево для ltr, слева направо для rtl
  • column: аналогично row, сверху вниз
  • column-reverse: аналогично row-reverse, снизу вверх

Изучаем Flexbox

display:inline-flex

Применяется к родительскому элементу. Определяет родительский элемент как инлайн-блочный (аналог inline-block).

Изучаем Flexbox

На картинке наглядно видна разница между display:flex и display:inline-flex на основе свойства flex-direction. Больше к этим свойствам обращаться не будем.

flex-wrap

Применяется к родительскому элементу. Определяет контейнер как однострочный или многострочный, а также направление расположения строк.

Все доступные варианты выравнивания для свойства flex-wrap:

  • nowrap (по умолчанию): однострочный / слева направо для ltr, справа налево для rtl
  • wrap: многострочный / слева направо для ltr, справа налево для rtl
  • wrap-reverse: многострочный / справа налево для ltr, слева направо для rtl

Зададим стили для примера:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; flex-wrap:wrap; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }

Изучаем Flexbox

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

Применим свойство flex-wrap:wrap-reverse;:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; flex-wrap:wrap-reverse; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }

Изучаем Flexbox

flex-flow

Применяется к родительскому элементу. Служит сокращением для flex-direction и flex-wrap.

Значение по умолчанию: flex-flow:row nowrap;

.parent { display:flex; border:2px solid #FF8C00; padding:20px; flex-flow:row nowrap; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }

justify-content

Применяется к родительскому элементу. Определяет выравнивание дочерних элементов внутри родителя. Помогает распределить свободное пространство в случае, когда элементы строки не тянутся, либо достигли своего максимального размера.

Все возможные значения для свойства:

  • flex-start (по умолчанию): элементы сдвигаются к началу строки
  • flex-end: элементы сдвигаются к концу строки
  • center: элементы выравниваются по центру строки
  • space-between: элементы распределяются равномерно (первый элемент в начале строки, последний — в конце)
  • space-around: элементы распределяются равномерно с равным расстоянием между собой и границами строки

Изучаем Flexbox

Зададим свойства для выравнивания элементов по центру:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; justify-content:center; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; }

Изучаем Flexbox

align-items

Применяется к родительскому элементу. Выравнивает дочерние элементы по вертикали. Свойство работает аналогично justify-content, но перпендикулярно.

Все возможные значения для свойства:

  • flex-start: граница cross-start для элементов располагается на позиции cross-start
  • flex-end: граница cross-end для элементов располагается на позиции cross-end
  • center: элементы выравниваются по центру поперечной оси
  • baseline: элементы выравниваются по своей базовой линии
  • stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учётом min-width/max-width)

Изучаем Flexbox

Внимание! Для примера немного добавились стили:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; align-items:center; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; } .child:last-child { height:200px; }

Изучаем Flexbox

align-content

Применяется к родительскому элементу. Свойство не работает с однострочным flexbox. Определяет выравнивание строк (аналогично свойству justify-content).

Все возможные значения свойства:

  • flex-start: строки выравниваются относительно начала контейнера
  • flex-end: строки выравниваются относительно конца контейнера
  • center: строки выравниваются по центру контейнера
  • space-between: строки распределяются равномерно (первая строка в начале строки, последняя — в конце)
  • space-around: строки распределяются равномерно с равным расстоянием между собой
  • stretch (по умолчанию): строки растягиваются, заполняя свободное пространство

Изучаем Flexbox

Обновим стили для примера:

.parent { height:500px; /* организуем лишнее пространство */ display:flex; border:2px solid #FF8C00; padding:20px; width:760px; flex-wrap:wrap; /* делаем flexbox многострочным */ align-content:space-around; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; width:100%; /* делаем перенос строк */ }

Изучаем Flexbox

Это все свойства, которые применяются к родителю. Теперь разберем свойства, которые применяются к дочерним элементам.

order

Применяется к дочерним элементам. Определяет порядок расположения элементов (можно изменить исходный порядок расположения в контейнере).

Обновляем стили:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; } .child:first-child { order:3; }

Изучаем Flexbox

Вуаля! Первый элемент стал последним.

flex-grow

Применяется к дочерним элементам. Принимает безразмерное значение, которое означает пропорцию, которую дочерний элемент занимает внутри родителя.

Если у всех дочерних элементов задано: flex-grow:1;, то они займут одинаковый размер (или 33,3333%). Если один из элементов будет иметь значение 2, то он будет занимать размер в 2 раза больше остальных.

Обновим стили:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex-grow:1; } .child:first-child { flex-grow:2; }

Изучаем Flexbox

Первый элемент занимает в 2 раза больше места, чем другие.

flex-shrink

Применяется к дочерним элементам. Определяет возможность элементов сжиматься при необходимости.

По умолчанию значение 1. Отрицательные числа не принимаются. 0 - элемент не сжимается.

Обновим стили:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; width:200px; flex-shrink:5; } .child:first-child { flex-shrink:1; }

Изучаем Flexbox

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

flex-basis

Применяется к дочерним элементам. Определяет размер по умолчанию для элемента перед распределением пространства в контейнере (что-то похожее на width).

По умолчанию значение default auto. Принимает значение ширины (px, em и другие).

Обновим стили:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:1060px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex-basis:200px; }

Изучаем Flexbox

В представленном примере все блоки имеют одинаковую начальную ширину - 200px.

flex

Применяется к дочерним элементам. Сокращение для flex-grow, flex-shrink и flex-basis. Второй и третий параметры не обязательны.

Значения по умолчанию: 0 1 auto.

Обновим стили:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex:none; }

Изучаем Flexbox

В приведенном примере дочерние элементы имеют ширину по содержимому.

align-self

Применяется к дочерним элементам. Позволяет переопределить выравнивание, заданное в align-items для отдельных элементов.

Все возможные значения для свойства:

  • flex-start: граница cross-start для элементов располагается на позиции cross-start
  • flex-end: граница cross-end для элементов располагается на позиции cross-end
  • center: элементы выравниваются по центру поперечной оси
  • baseline: элементы выравниваются по своей базовой линии
  • stretch (по умолчанию): элементы растягиваютcя, заполняя контейнер (с учётом min-width/max-width)

Обновим стили. Зададим другое выравнивание первому элементу:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; align-items:center; height:300px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; } .child:first-child { align-self:flex-start; }

Изучаем Flexbox

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

Ну и в заключение приведу пример, в которой в строку будут стоят 3 блока. Первый блок будет 200px, сжиматься и растягиваться не будет. Остальные 2 блока будут занимать все оставшееся пространство, причем как растягиваться так и сжиматься. Без flexbox это сделать достаточно проблематично. Посмотрим на код css при использовании flexbox:

.parent { display:flex; border:2px solid #FF8C00; padding:20px; width:760px; } .child { background-color:#ededed; border:2px solid #768D44; padding:30px; margin:10px; flex:1 200px; } .child:first-child { flex:0 0 200px; }

Изучаем Flexbox

Вот и все! Обзорная экскурсия по flexbox закончена. Экспериментируйте и все получится!

webkab.ru


 

..:::Новинки:::..

Windows Commander 5.11 Свежая версия.

Новая версия
IrfanView 3.75 (рус)

Обновление текстового редактора TextEd, уже 1.75a

System mechanic 3.7f
Новая версия

Обновление плагинов для WC, смотрим :-)

Весь Winamp
Посетите новый сайт.

WinRaR 3.00
Релиз уже здесь

PowerDesk 4.0 free
Просто - напросто сильный upgrade проводника.

..:::Счетчики:::..