Начальная

Windows Commander

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

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

File managers and best utilites

Flexbox, который работает во всех браузерах, кроме Safari. Зачем? Поддержка браузерами flex


Свойство flex | CSS справочник

CSS свойства

Определение и применение

CSS свойство flex является короткой записью для свойств, которые позволяют определить размер для флекс элемента, установленный по умолчанию, указать на сколько элемент может увеличится, либо уменьшится по отношению к остальным флекс элементам в одном контейнере, а именно:

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

CSS синтаксис:

flex:"flex-grow flex-shrink flex-basis | auto | none | initial | inherit"; Если указывается одно числовое значение оно устанавливается для flex-grow, если указаны единицы измерения CSS, то для flex-basis Если второе значение соответствует числовому значению, то оно устанавливается для flex-shrink, если указаны единицы измерения CSS, то для flex-basis и т.п.

JavaScript синтаксис:

object.style.flex = "0 1 auto"

Значения свойства

ЗначениеОписание
flex-growЧисло, которое указывает, на сколько будет увеличен блок по отношению к остальным флекс элементам в контейнере. Отрицательные значения не допускаются. Значение по умолчанию 0.
flex-shrinkЧисло, которое указывает, на сколько будет уменьшен блок по отношению к остальным флекс элементам в контейнере (при недостатке свободного пространства). Отрицательные значения не допускаются. Значение по умолчанию 1.
flex-basisОпределяет размер для флекс элемента, установленный по умолчанию перед распределением пространства в контейнере. Отрицательные значения не допускаются. Размер указывается в единицах измерения CSS(px, em, pt и т.д.), либо высчитывается автоматически браузером исходя из содержания элемента. Значение по умолчанию auto.
autoСоответствует значению flex : 1 1 auto;.
noneСоответствует значению flex : 0 0 auto;.
initialУстанавливает свойство в значение по умолчанию. Соответствует значению flex : 0 1 auto;.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

Рассмотрим пример увеличения флекс элементов в CSS, используя свойство flex:

<!DOCTYPE html> <html> <head> <title>Увеличение флекс элементов в CSS</title> <style> .container { width: 100%; /* устанавливаем ширину блока */ height: 100px; /* устанавливаем высоту блока */ display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ color: white; /* устанавливаем цвет шрифта */ } .container div:nth-of-type(1) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере) -webkit-flex: 1; /* для поддержки ранних версий браузеров */ flex: 1; /* число, которое указывает, на сколько будет увеличен блок по отношению к остальным флекс элементам */ background: orange; /* устанавливаем цвет заднего фона */ } .container div:nth-of-type(2) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере) -webkit-flex: 3; /* для поддержки ранних версий браузеров */ flex: 3; /* число, которое указывает, на сколько будет увеличен блок по отношению к остальным флекс элементам */ background: brown; /* устанавливаем цвет заднего фона */ } .container div:nth-of-type(3) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере) -webkit-flex: 1; /* для поддержки ранних версий браузеров */ flex: 1; /* число, которое указывает, на сколько будет увеличен блок по отношению к остальным флекс элементам */ background: tan; /* устанавливаем цвет заднего фона */ } </style> </head> <body> <div class = "container"> <div>1</div> <div>3</div> <div>1</div> </div> </body> </html> Пример использования CSS свойства flex(увеличение флекс элементов в CSS). Пример использования CSS свойства flex(увеличение флекс элементов в CSS).

Рассмотрим пример уменьшения флекс элементов в CSS, используя свойство flex:

<!DOCTYPE html> <html> <head> <title>Уменьшение флекс элементов в CSS</title> <style> .container { width: 250px; /* устанавливаем ширину блока */ height: 100px; /* устанавливаем высоту блока */ display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ color: white; /* устанавливаем цвет шрифта */ /* устанавливаем два свойства для возможности масштабировать контейнер по горизонтали (изменять ширину): */ overflow: auto; /* указываем, что при переполнении содержимое отображается (автоматический режим) */ resize: horizontal; /* пользователь может изменять ширину элемента */ } .container div:nth-of-type(1) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере) -webkit-flex: 0 1 150px; /* для поддержки ранних версий браузеров */ flex: 0 1 150px; /* блоки по отношению к другим не увеличиваем(значение 0), указываем, что блок при недостатке места будет уменьшен по умолчанию(1), определяем начальную ширину флекс элемента (приведет сразу к уменьшению второго блока, т.к. ширина контейнера 250px) */ background: orange; /* устанавливаем цвет заднего фона */ } .container div:nth-of-type(2) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере) -webkit-flex: 0 3 150px; /* для поддержки ранних версий браузеров */ flex: 0 3 150px; /* блоки по отношению к другим не увеличиваем(значение 0), указываем, что блок при недостатке места будет уменьшен по отношению к другим на 3, определяем начальную ширину флекс элемента (приведет сразу к уменьшению второго блока, т.к. ширина контейнера 250px) */ background: brown; /* устанавливаем цвет заднего фона */ } .container div:nth-of-type(3) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере) -webkit-flex: 0 1 150px; /* для поддержки ранних версий браузеров */ flex: 0 1 150px; /* блоки по отношению к другим не увеличиваем(значение 0), указываем, что блок при недостатке места будет уменьшен по умолчанию(1), определяем начальную ширину флекс элемента (приведет сразу к уменьшению второго блока, т.к. ширина контейнера 250px) */ background: tan; /* устанавливаем цвет заднего фона */ } </style> </head> <body> <div class = "container"> <div>1</div> <div>3</div> <div>1</div> </div> </body> </html> Пример использования CSS свойства flex(уменьшение флекс элементов в CSS). Пример использования CSS свойства flex(уменьшение флекс элементов в CSS).

Рассмотрим пример, где мы укажем значение ширины флекс элемента по умолчанию, используя при этом единицы измерения CSS и в автоматическом режиме, используя свойство flex:

<!DOCTYPE html> <html> <head> <title>Размер флекс элементов по умолчанию в CSS</title> <style> .container { width: 250px; /* устанавливаем ширину блока */ height: 100px; /* устанавливаем высоту блока */ display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ color: white; /* устанавливаем цвет шрифта */ /* устанавливаем два свойства для возможности масштабировать контейнер по горизонтали (изменять ширину): */ overflow: auto; /* указываем, что при переполнении содержимое отображается (автоматический режим) */ resize: horizontal; /* пользователь может изменять ширину элемента */ } .container div:nth-of-type(1) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем первый <div> в контейнере) -webkit-flex: 0 1 auto; /* для поддержки ранних версий браузеров */ flex: 0 1 auto; /* для элемента задано значение по умолчанию (ширина элемента расчитывается по содержимомку) */ background: orange; /* устанавливаем цвет заднего фона */ } .container div:nth-of-type(2) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем второй <div> в контейнере) -webkit-flex: 0 1 150px; /* для поддержки ранних версий браузеров */ flex: 0 1 150px; /* элемент не увеличиваем и не уменьшаем по отношению к другим, но значение ширины по умолчанию устанавливаем равной 150px */ background: brown; /* устанавливаем цвет заднего фона */ } .container div:nth-of-type(3) { псевдокласс :nth-of-type() выбирает каждый указанный элемент, который является заданным дочерним элементом своего родительского элемента (выбираем третий <div> в контейнере) -webkit-flex: 0 1 auto; /* для поддержки ранних версий браузеров */ flex: 0 1 auto; /* для элемента задано значение по умолчанию (ширина элемента расчитывается по содержимомку) */ background: tan; /* устанавливаем цвет заднего фона */ } </style> </head> <body> <div class = "container"> <div>auto</div> <div>150px</div> <div>auto</div> </div> </body> </html> Пример использования CSS свойства flex(размер флекс элементов по умолчанию в CSS). Пример использования CSS свойства flex(размер флекс элементов по умолчанию в CSS).CSS свойства

basicweb.ru

Как работает Flexbox | Блог web-разработчика

flexbox-logo.png

​Что такое flexbox?

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

Для чего нужен Flexbox?

Разработчики на протяжении долгого времени использовали таблицы, float-элементы, inline-block и другие CSS свойства, чтобы придать блокам нужное расположение. Однако ни один из вышеперечисленных инструментов не был предназначен для создания сложных страниц и приложений, которые в настоящее время используются почти в каждом проекте. Простые вещи, как вертикальное центрирование, осуществлялись достаточно сложно. Создание же макета на основе жидких сеток вообще считается верхом профессионализма, вот почему широкое распространение получили CSS-фреймворки на основе сеток. Итак, если множество проектов часто используют жидкие сетки, блоки одинаковой высоты, вертикальное центрирование блоков и т.д., то возникает вопрос: "Почему до сих пор нет свойства, которе позволило бы осуществлять эти вещи быстро и просто?"

Целью Flexbox является решение всех этих проблем!

Статус спецификации и поддержка браузерами

Модель flexbox разрабатывается уже четвёртый год. Браузеры используют разные экспериментальные версии спецификации. В сентябре 2012 года 3-я  проверка ситаксиса Flexbox группой разработчиков из W3C  достигла статуса W3C Candidate. Это означает, что W3C утверждает текущий синтаксис и даёт добро на использование вендорных префиксов браузерами.

История изменений спецификации по Flexbox:

  • Июль 2009 Working Draft (display: box;)
  • Март 2011 Working Draft (display: flexbox;)
  • Ноябрь 2011 Working Draft (display: flexbox;)
  • Март 2012 Working Draft (display: flexbox;)
  • Июнь 2012 Working Draft (display: flex;)
  • Сентябрь 2012 Candidate Recommendation (display: flex;)

Браузеры получили быструю поддержку Flexbox. Chrome 22+, Opera 12.1+, IE10, Firefox >=16 уже поддерживают Flexbox. Я рекомендую использовать один из этих браузеров для просмотра примеров.

Концепция и терминология

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

Модель Flexbox включает в себя flex-контейнер (flex container) и flex-пункты (flex items). Flex container должен иметь свойство display со значением flex или inline-flex. Со значением flex контейнер представляет из себя блочный элемент, а с inline-flex - строчный (инлайновый).

Пример объявления flex container:

.flex-container { display: -webkit-flex; display: flex; }

Flex container является родителем по отношению к flex items. Flex-пунктов может быть сколько угодно. Всё что находится вне flex-контейнера и внутри flex-пунктов отображается как обычно. Таким образо, Flexbox определяет, как flex-пункты будут расположены внутри flex-контейнера.

Flex линия

flex-line.png

Flex items расположены внутри flex container вдоль flex line (flex линии). По умолчанию во  flex-контейнере  присутствует только одна flex-линия. Вот пример с двумя пунктами, расположенными по умолчанию вдоль flex-линии слева направо:

flexbox

.flex-container{ display: -webkit-flex; display: flex; width: 700px; background-color: green; margin: 20px auto; } .flex-item{ background-color: red; width: 100px; height: 100px; margin: 5px; color: #fff; }

Writing modes (режимы отображения содержимого)

Важной частью настройки flexbox является изменение направления flex-линии. По умолчанию направление flex-линии совпадает с направлением текста: слева направо, сверху вниз.

В спецификации появился новый модуль writing modes. Он позволяет менять направление текста справа налево, или даже вертикально.

Данный модуль находтся в стадии разработки, но Chrome поддерживает CSS свойство direction. Если в предыдущем примере установить свойство direction: rtl (справа налево), то изменится не только направление отображения содержимого  справа налево, но и direction flex-линии, что приведет к изменению макета.

Writing modes

body { direction: rtl; } .flex-container { display: -webkit-flex; display: flex; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; }

Из данного примера можно сделать вывод, почему терминология Flexbox на данный момент настолько абстрактна. Нельзя просто указать “вправо”, “влево”, “вниз”, “вверх” когда мы не имеем понятия на каком языке написана данная страница (возможно на арабском - стиль письма справа налево!).

Главная и поперечная оси

flex-cross.png

Чтобы не зависеть от режима отображения содержимого direction, Flexbox использует концепцию главной оси и поперечной оси (Main Axis и  Cross Axis). Flex-линия следуют по главной оси. Поперечная ось перпендикулярна главной оси. Имена начальных и конечных точек, а также направления каждой оси:

  • Main Start
  • Main End
  • Main Direction (иногда называется Flow Direction)
  • Cross Start
  • Cross End
  • Cross Direction

Перед тем как продолжить, важно понять терминологию главной и поперечной оси. Всё в модели flexbox расположено относительно этих двух осей. Во всех наших примерах режим наложения writing mode был слева направо, сверху вниз. Но вы должны иметь ввиду, что это может быть не всегда так.

Свойства Flex контейнера:

Flex-direction

Свойство flex-direction позволяет менять оси flex-контейнера. По умолчанию свойство flex-direction имеет значение row. В этом случае flex-пункты располагаются в соответствии с режимом writing-mode. Еще раз напомним, что это означает направление слева направо, сверху вниз (по умолчанию).

Другие возможные значения:

  • row-reverse: Main Start И Main End меняются местами. Если даже writing-mode указан ltr (слева налево), то flex-пункты все равно будут расположены справа налево.
  • column: Главная ось и поперечная ось меняются местами. Если режим отображения содержимого горизонтальный, то flex-пункты все равно будут располагаться вертикально.
  • column-reverse: аналогично column только обратный.

Изменим в предыдущем примере свойство flex-direction на column:

flexbox

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; }

Теперь flex-пункты располагаются вертикально.

justify-content

justify-content регулирует расположение flex-пунктов по главной оси. Возможные значения:

  • flex-start (по умолчанию)
  • flex-end
  • center
  • space-between
  • space-around

Рассмотрим пример с justify-content : center чтобы flex-пункты центрировались по главной оси:

flexbox

.flex-container { display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; }

flex-start, flex-end, и center работают, соединившись вместе по главной оси. А вот space-between и space-around распределяют свободное пространство между flex-пунктами определённым способом. Приведу диаграмму из спецификации, которая показывает распределение justify-content:

flexbox

align-items

align-items является дополнительным свойством к justify-content. align-items регулирует отображение flex-пунктов относительно перпендикулярной оси. Возможные значения:

  • flex-start (по умолчанию)
  • flex-end
  • center
  • baseline
  • stretch

Рассмотрим примение свойства align-items:center, которе позволяет flex-пункты вертикально центрировать относительно перпендикулярной оси:

flexbox

.flex-container { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; }

Итак, flex-start, flex-end, и center всегда располагаются соединившись вместе. Значение stretch довольно простое: оно заставляет flex-пункты растягиваться от Cross Start до Cross End, то есть по вертикали относительно flex-контейнера. baseline заставляет flex-пункты располагаться по базовой линии. Базовая линия вычисляется исходя из инлайнового содержимого flex-пунктов. Вот лучшее объяснение работы данных значений:

flexbox

Flex-wrap

Во всех рассмотренных примерах flex-контейнер имел одну flex-линию. Использование свойства flex-wrap позволит создать flex-контейнер с разным количеством flex-линий. Возможные значения:

  • nowrap (по умолчанию)
  • wrap
  • wrap-reverse

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

Пример использования flex-wrap:

flexbox

flex item 1

flex item 2

flex item 3

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 300px; height: 100px; margin: 5px; }

Значение wrap-reverse аналогично значению wrap за исключением того, что новые flex-линии добавляются в обратном направлении по перпендикулярной оси.

align-content

align-content изменяет поведение свойства flex-wrap. Это значение аналогично align-items только вместо выравнивания flex-пунктов, оно выравнивает flex-линии. Как и можно было ожидать, значения аналогичные:

  • stretch (по умолчанию)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

Принцип работы этих значений аналогичный justify-content и align-items.

Пример align-content: center

flexbox

flex item 1

flex item 2

flex item 3

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 300px; height: 100px; margin: 5px; } .first { -webkit-order: -1; order: -1; }

flex-flow

Данное свойство компонует в себя свойства flex-direction и flex-wrap.

flex-flow: [flex-direction] [flex-wrap]

Пример:

.flex-container { -webkit-flex-flow: column nowrap; flex-flow: column nowrap; }

Свойства flex-пунктов (flex items)

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

Как говорят, flex-пункты имеют Main Size и Cross Size. Main Size – это размер flex-пункта в направлении главной оси, а Cross Size - в направлении поперечной оси. Фактически, шириной или высотой flex-пункта могут быть Main Size и Cross Size в зависимости от оси flex-контейнера.

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

Order

Order является простейшим свойством. Порядок расположения flex-пунктов обеспечивается расположением flex-пунктов в HTML. В этом примере мы изменим значение свойства order одного flex-пункта на -1 и посмотрим, как при этом поменяется порядок расположения других flex-пунктов.

flexbox

flex item 1

flex item 2

flex item 3

.flex-container { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 300px; height: 100px; margin: 5px; } .first { -webkit-order: -1; order: -1; }

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

Margin

Наверняка вам знаком эффект margin: auto. Flexbox выполняет нечто подобное, но с еще более широкими возможностями. “auto” поглащает лишнее пространство. Это свойство может использоваться для разнообразного  позиционирования flex-пунктов.

Например, объявим margin-right: auto; для первого flex-пункта, при этом он  предоставит всё возможное свободное пространство справа от себя:

flexbox

flex item 1

flex item 2

flex item 3

.flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; } .flex-item:first-child{ margin-right: auto; }

Теперь посмотрим на примере как работает margin: auto

flexbox

.flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; height: 100px; margin: 5px; } .flex-item:first-child{ margin: auto; }

align-self

Свойство align-self пункта служит для перекрытия свойства align-items flex-контейнера. Возможные значения аналогичные align-items:

  • stretch (по умолчанию)
  • flex-start
  • flex-end
  • center
  • baseline

В этом примере мы назначим пунктам различные значения свойства align-self:

flexbox

flex-start

flex-end

center

base

line

stretch

.flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; min-height:70px; margin: 5px; } .item1 { -webkit-align-self: flex-start; align-self: flex-start; } .item2 { -webkit-align-self: flex-end; align-self: flex-end; } .item3 { -webkit-align-self: center; align-self: center; } .item4 { -webkit-align-self: baseline; align-self: baseline; } .item5 { -webkit-align-self: baseline; align-self: baseline; padding: 2em 0; } .item6 { -webkit-align-self: stretch; align-self: stretch; }

flex

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

Flex:[number]

Такой синтаксис указывает какую часть должен занимать flex-пункт от общей ширины flex-контейнера. В следующем примере первый flex-пункт будет занимать 2/4 свободного места, а остальные два flex-пункта по 1/4:

flexbox

.flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; min-height:70px; margin: 5px; } .item1 { -webkit-flex: 2; flex: 2; } .item2 { -webkit-flex: 1; flex: 1; } .item3 { -webkit-flex: 1; flex: 1; }

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

flexbox

.flex-container { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 700px; height: 240px; background-color: green; margin: 10px auto; } .flex-item { background-color: red; width: 100px; min-height:70px; margin: 5px; } .item1 { -webkit-flex: 1; flex: 1; } .item2 { -webkit-flex: 1; flex: 1; } .item3 { -webkit-flex: 1; flex: 1; }

flex: initial

Flex-пункты с данным значением будет иметь строго фиксированную ширину, но только при наличии свободного пространства (при необходимости уменьшиться в размере - становится резиновым).

flex: auto

Flex-пункты становятся полностью резиновыми вдоль главной оси. Не корректно работает в Chrome 23.0.1271.95, поэтому лучше использовать flex: 1.

flex: none

flex-пункты становятся фиксированной ширины при всех ситуациях

advanced flex

Свойство flex можно использовать в режиме сокращения для придания спецефичности выбора flex-grow, flex-shrink, и flex-basis в одном объявлении: flex: [flex-grow] [flex-shrink] [flex-basis]

В большинтсве случаев не требуется такой синтаксис. Более того, для применения данного сокращения необходимо  глубокое понимание модели Flexbox. Вы можете сделать каждое из свойств flex-grow, flex-shrink, и flex-basis специфичным. Я настоятельно рекомендую не использовать данное сокращение: по умолчанию придаются более разумные значения.

visibility

Когда реализуется свойство visibility: collapse; оно будет отличаться от значений visibility: hidden; и display: none; для flex-пунктов. Со значением collapse элемент задействует Cross Size flex-контейнера, но затрагивать пространство главной оси не будет. Это может быть полезным для динамического добавления или удаления flex-пунктов без оказания влияния на Cross Size flex-контейнера.

В настоящее время visibility: collapse; не коррексно работает в браузерах. На данный момент visibility: collapse; выполняет тоже самое что и visibility: hidden; Я уверен, что в ближайшее время ситуация изменится.

Посмотреть, как должно работать значение collapse в спецификации (http://www.w3.org/TR/css3-flexbox/#visibility-collapse)

Заключение

Как вы понимаете, Flexbox представляет мощное средство конструирования макетов. Он требует совершенно нового подхода для отображения блоков. Надеюсь, эта статья стала полезной для вас и вы сможете уже сейчас начать экспериментировать с макетами с помощью Flexbox. Будущее этой модели действительно потрясающее.

area53.ru

Свойство flex-direction | CSS справочник

CSS свойства

Определение и применение

CSS свойство flex-directioncss3 позволяет указать направление, в соответствии с которым располагаются флекс элементы внутри флекс контейнера.

Направление флекс элементов формируется исходя из положения двух осей: главной оси флекс контейнера и его поперечной оси, которая всегда распологается перпендикулярно главной. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а поперечная – сверху вниз (это значение по умолчанию), для значения rtl отображается зеркально соответственно.

Обращаю Ваше внимание, если элемент не является флекс элементом (не находится внутри родительского элемента, который является блочным, или строчным флекс контейнером), то свойство flex-directioncss3 не окажет на такой элемент никакого эффекта.

Схематичное отображение работы свойства flex-directioncss3 отображено на следующем изображении (при направлении ltr):

Схематичное отображение работы свойства flex-direction

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

CSS синтаксис:

flex-direction:"row | row-reverse | column | column-reverse | initial | inherit";

JavaScript синтаксис:

object.style.flexDirection = "column"

Значения свойства

ЗначениеОписание
rowФлекс элементы отображаются горизонтально, в виде строки. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается слева направо, а при значения rtl отображается справо налево. Это значение по умолчанию.
row-reverseФлекс элементы отображаются горизонтально, в виде строки по аналогии со значением row, но формирование строки идёт в обратном направлении. Главная ось при направлении ltr (глобальный HTML атрибут dir, либо CSS свойство direction со значением ltr) располагается справо налево, а при значения rtl отображается слева направо.
columnФлекс элементы отображаются вертикально как колонны. Формирование колонны осуществляется сверху вниз.
column-reverseФлекс элементы отображаются вертикально как колонны по аналогии со значением column, но формирование колонны идёт в обратном направлении (снизу вверх).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html> <html> <head> <title>Пример указания направления для флекс элементов</title> <style> .container { display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ -webkit-flex-direction: row; /* для поддержки ранних версий браузеров */ flex-direction: row; /* флекс элементы отображаются горизонтально, в виде строки (по умолчанию) */ } .container2 { display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ -webkit-flex-direction: column; /* для поддержки ранних версий браузеров */ flex-direction: column; /* флекс элементы отображаются вертикально как колонны */ } .container3 { display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ -webkit-flex-direction: row-reverse; /* для поддержки ранних версий браузеров */ flex-direction: row-reverse; /* флекс элементы отображаются горизонтально, в виде строки по аналогии со значением row, но формирование строки идёт в обратном направлении */ } .container4 { display: -webkit-flex; /* для поддержки ранних версий браузеров */ display: flex; /* элемент отображается как блочный flex-контейнер */ -webkit-flex-direction: column-reverse; /* для поддержки ранних версий браузеров */ flex-direction: column-reverse; /* флекс элементы отображаются вертикально как колонны по аналогии со значением column, но формирование колонны идёт в обратном направлении (снизу вверх) */ } div > div { используем селектор дочерних элементов (форматируем все элементы <div>, вложенные внутрь элементов <div>) width: 50px; /* устанавливаем ширину блока */ height: 50px; /* устанавливаем высоту блока */ margin: 5px; /* устанавливаем внешние отступы со всех сторон */ border: 3px solid orange; /* устанавливаем сплошную границу 3px оранжевого цвета */ } </style> </head> <body> <h4>flex-direction:row;</h4> <div class = "container"> <div>A</div> <div>B</div> <div>C</div> </div> <h4>flex-direction:column;</h4> <div class = "container2"> <div>A</div> <div>B</div> <div>C</div> </div> <h4>flex-direction:row-reverse;</h4> <div class = "container3"> <div>A</div> <div>B</div> <div>C</div> </div> <h4>flex-direction:column-reverse;</h4> <div class = "container4"> <div>A</div> <div>B</div> <div>C</div> </div> </body> </html> Пример использования CSS свойства flex-direction(пример указания направления для флекс элементов). Пример использования CSS свойства flex-direction(пример указания направления для флекс элементов).CSS свойства

basicweb.ru

flexbox - Поддержка Cross Browser для CSS Flexbox

Модель CSS Flexbox оптимизирована для дизайна пользовательского интерфейса. Он разработан в первую очередь, чтобы избежать переполнения родительского элемента. Он уменьшит количество детей, когда размер элемента предка сократится. Он заполнит пространство, увеличив размер дочерних элементов, когда размер элемента предка расширится. Уплотнение контейнера Flex и расширение поведения могут нарушаться с минимальным и максимальным свойством width/height.

CSS Flexbox версии по версии

W3 2009: display: box;

box-align start | end | center | baseline | stretch box-direction normal | reverse | inherit box-flex <number> 0.0 box-flex-group <integer> 1 box-lines single | multiple box-ordinal-group <integer> 1 visual box-orient horizontal | vertical | inline-axis | block-axis | inherit inline-axis box elements no no visual box-pack start | end | center | justify

W3 2011: дисплей Flexbox | inline- flexbox

flex-align auto | baseline auto flex-direction lr | rl | tb | bt | inline | inline-reverse | block | block-reverse flexboxes no lr | rl | tb | bt flex-order <integer> 1 flex-pack start | end | center | justify

W3 2012: дисплей flex | inline-flex

align-content flex-start | flex-end | center | space-between | space-around | stretch align-items flex-start | flex-end | center | baseline | stretch align-self auto | flex-start | flex-end | center | baseline | stretch flex-direction row | row-reverse | column | column-reverse flex-flow <'flex-direction'> || <'flex-wrap'> flex-grow <number> ‘0’ flex-shrink <number> ‘1’ flex-wrap nowrap | wrap | wrap-reverse justify-content flex-start | flex-end | center | space-between | space-around order <number> 0

qaru.site

html - Flexbox, который работает во всех браузерах, кроме Safari. Зачем?

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

Это мой пример:

<style> ul { margin: 0; padding: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 150px; width:auto; } li { float: left; display: inline-block; list-style: none; position: relative; height: 50px; width: 50px; } </style> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> Это то, что я пробовал до сих пор, и прекрасно работает на всех других браузерах, но не совместим с браузером Safari, если не добавить это: display: -webkit-flex;.

Я хочу преобразовать вывод следующим образом:

1 4 7 10 2 5 8 11 3 6 9 12

Важно, чтобы это работало в браузере Safari, пока я вообще не могу решить эту проблему, я бы посоветовал любую помощь:)

Тестовая ссылка:

http://jsfiddle.net/rafcastro77/3zd7yspg/59/

источник поделиться

qaru.site

Применение Flexbox – комбинация старой и новой версии с целью обеспечения улучшенной поддержки в браузерах

Перевод статьи: Using Flexbox: Mixing Old and New for the Best Browser Support.Автор: Chris Coyier.

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

HTML основа.

Внешний <div> представляет собой семантически бессмысленный элемент-обертку, охватывающий три основные области страницы и определяющий рамки Flexbox контекста. Каждая из внутренних областей создана с помощью семантически корректной разметки и будет представлять отдельную колонку макета документа.

<section role="main">Main content /* Размещаем этот блок первым в разметке */</section>

<nav role="navigation">Links</nav>

<aside role="complementary">Sidebar</aside>

</div>

Что в результате даст такой внешний вид:

Создаем Flexbox контекст.

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

И именно здесь, в рамках создаваемого нами контекста мы должны использовать комплекс правил, предусмотренных старым, новым и промежуточным синтаксисом модуля Flexbox. Порядок определения этих правил является очень важным моментом. Поскольку само имя свойства не предусматривает никаких префиксов, то мы должны быть уверены в том, что в процессе создания контекста мы не переопределяем новые значения этого свойства, теми, которые предусмотрены ранним синтаксисом в тех браузерах, которые все еще поддерживают (и возможно всегда будут это делать) оба варианта.

.page-wrap {display: -webkit-box; /* старый синтаксис — iOS 6-, Safari 3.1-6 */display: -moz-box; /* старый синтаксис — Firefox 19- (не гарантированно, но в большинстве случаев работает) */display: -ms-flexbox; /* промежуточный синтаксис — IE 10 */display: -webkit-flex; /* новый синтаксис — Chrome */display: flex; /* новый синтаксис, предусмотренный спецификацией — Opera 12.1, Firefox 20+ */}

Контроль ширины колонок.

В результате всех преобразований мы должны получить трех колоночный макет страницы с соотношениями 20% / 60% / 20%.

Во-первых, нам необходимо установить 60%-ю ширину колонки основного контента. И, во-вторых, равномерно распределить оставшееся в нашем распоряжении свободное пространство между боковыми колонками.

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

.main-content {width: 60%;}.main-nav,.main-sidebar {-webkit-box-flex: 1; /* старый синтаксис — iOS 6-, Safari 3.1-6 */-moz-box-flex: 1; /* старый синтаксис — Firefox 19- */width: 20%; /* Для предотвращения конфликта нового и старого синтаксисов. */-webkit-flex: 1; /* Chrome */-ms-flex: 1; /* IE 10 */flex: 1; /* новый синтаксис, предусмотренный спецификацией — Opera 12.1, Firefox 20+ */}

Новый синтаксис не требует явного указания ширины боковых колонок, так как в этом случае оставшиеся 40% доступного свободного пространства будут автоматически поровну (по 20%) разделены между ними. Но мною было обнаружено, что если не указать их ширину явно, то это может привести к нежелательным последствиям, связанным с конфликтом различных значений ширины определенных с помощью старого синтаксиса.

Организация порядка отображения колонок.

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

.main-content {-webkit-box-ordinal-group: 2; /* старый синтаксис — iOS 6-, Safari 3.1-6 */-moz-box-ordinal-group: 2; /* старый синтаксис — Firefox 19- */-ms-flex-order: 2; /* промежуточный синтаксис 2011 года — IE 10 */-webkit-order: 2; /* новый синтаксис — Chrome */order: 2; /* новый синтаксис, предусмотренный спецификацией — Opera 12.1, Firefox 20+ */}.main-nav {-webkit-box-ordinal-group: 1;-moz-box-ordinal-group: 1;-ms-flex-order: 1;-webkit-order: 1;order: 1;}.main-sidebar {-webkit-box-ordinal-group: 3;-moz-box-ordinal-group: 3;-ms-flex-order: 3;-webkit-order: 3;order: 3;}

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

За счет использования в нашем CSS коде всех трех существующих на данный момент вариантов Flexbox синтаксиса мы можем рассчитывать на его полную работоспособность в следующих браузерах:

    Chrome все версии.
  • Firefox все версии.
  • Safari все версии.
  • Opera начиная с 12.1 версии.
  • IE 10 и выше.
  • iOS все версии.
  • Android все версии.

Основным ограничением здесь является поддержка в IE, хотя общая картина выглядит довольно неплохо. Если же вы используете такой подход для создания специальной мобильной версии сайта, то вы находитесь в еще более выигрышной ситуации. Буду рад вашим комментариям по результатам работы этого кода на Windows Phone.

Что касается поддержки в Firefox 19-, то здесь можно столкнуться с багами и это нужно проконтролировать, так как результат зависит от конкретного случая. Допустим, применительно к используемому в статье примеру я так и не нашел способ гарантированно установить 20%-ю ширину боковых колонок. И она может захватить область основного контента, ширина которой иногда зависит от формата находящегося внутри текста. Кроме того, мне пришлось использовать свойство -moz-box-flex: 1 применительно к средней колонке основного контента. Иначе в том случае если она содержит фрагмент текста отформатированный как white-space: nowrap, ширина которого больше ширины средней колонки (его контейнера), то это приведет к растягиванию самой колонки. Такое поведение необъяснимо и является ни чем иным как багом.

Смотреть результат работы кода на CodePen

webknowledge.ru

Разрушение мифов о Flexbox — CSS-LIVE

Перевод статьи FLEXBOX MYTH BUSTING  с сайта jonyablonski.com, опубликовано на css-live.ru с разрешения автора — Джона Яблонски.

Если вы периодически пишете CSS, то скорее всего слышали про «flexbox» (Модуль раскладки гибких боксов). Возможно, вы даже слышали, что flexbox способен решить множество проблем, которые, как считается, трудно, а то и невозможно решить без помощи Javascript. Вероятно, вы даже слышали или сами считаете, будто использовать flexbox пока рановато. В этой статье я развею множество «мифов», которые окружают эту мощную модель раскладки.

Миф #1: Flexbox тормозит

С момента первого появления в 2009 году CSS-модуль раскладки гибких боксов претерпел много изменений. В ходе развития спецификации и реализаций в браузерах возникло несколько версий синтаксиса (прим. перев. перевод на css-live.ru). В 2013 году исследование конкретного примера Smashing Magazine выявило проблемы с производительностью, связанные с использованием исходного (устаревшего) flexbox, который использует «display: box». Эти проблемы с производительностью уже исправлены в новой версии, которая использует «display: flex», и которая в 2.3 раза быстрее старого flexbox.

Миф #2: У Flexbox пока нет хорошей поддержки

Вопреки живучему предрассудку, браузерная поддержка flexbox — прекрасная (83% по общемировой статистике на конец 2015 года). С полной поддержкой в последних релизах любого основного браузера можете начать использовать flexbox в вашей работе ни за что не опасаясь. Кроме того, можно поддерживать старые версии браузера, примешивая синтаксис из ранних версий flexbox и используя браузерные префиксы.

Во многих случаях, свойства flexbox могут сосуществовать с не-флексбоксными свойствами. Это позволяет использовать для базовой раскладки плавающие блоки или таблицы, а затем переопределять эти свойства с помощью flexbox в поддерживающих браузерах. В случаях, когда это не сработает, определение возможностей позволит выбирать поддерживающие/не поддерживающие браузеры отдельно. Такой подход очень удобен для браузеров типа >=IE9, где  запасное решение необходимо, пока вы поддерживаете эти браузеры (по общемировой статистике на конец 2015 у IE9 поддержка порядка ~1%).

Миф #3: Flexbox слишком сложный

Как и всё новое, синтаксис flexbox может показаться сложным на первый взгляд. Обычно разработчикам приходилось полагаться на таблицы, плавающие или строчные блоки, каждый их которых имеет ограничения и чреват недостатками. С flexbox у разработчиков теперь есть более эффективный способ раскладки блоков, выравнивания и распределения пустого пространства вокруг элементов в контейнере. Особенно это удобно в адаптивной вёрстке, где требуется гибкость. Для этой гибкости, нам нужен более надёжный метод управления раскладкой.

Но flexbox не такой уж и сложный — просто он заставляет думать о веб-раскладке по-другому. После понимания того, как он работает, вы непременно осознаете его мощь. Кроме того, в вебе полно ресурсов, которые помогут вам изучить синтаксис flexbox (воспользуйтесь «Полным руководством по Flexbox» от Криса Койера или этим удобным инструментом Беннета Фили, для начала)

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

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

css-live.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 проводника.

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