Начальная

Windows Commander

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

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

File managers and best utilites

flex-direction. Css flex поддержка браузерами


Почему стоит начать использовать flexbox

Менее 50% процентов используют flexbox в своих проектах. Возможно пока что не все знают об этом замечательном свойстве. В данной статье рассмотрим несколько причин для использования flexbox.

1. Данное свойство поддерживается всеми современными браузерами

Почему я раньше не использовал свойство CSS3 - display:flex? Я не подозревал о широкой поддержки данного свойства всеми современными браузерами. Даже в браузере от майкрософта оно работает с 10 версии IE.

2. Не нужно беспокоиться о синтаксисе

Даже если текущий синтаксис своства flex поддерживается последними версиями браузеров, то как быть, хотя бы, с двумя последними версиями популярных браузеров? Для поддержки последних двух версий браузера  достаточно 4 правила для свойства "display".

/* Для поддержки современных браузеров */ .flex-container { display: flex; } /* Для поддержки последних двух версий популярных браузеров */ .flex-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }

3. Очень легко начать работу

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

Но вам не придется изучать все значения и параметры с нуля. Для большинства случаев достаточно использование трех свойств:

  • display - Устанавливает элемент как встроенный элемент или блок flexbox с дочерними элементами
  • justify-content - Данное свойство определяет горизонтальное выравнивание элементов внутри flex контейнера
  • align-items - Данное свойство определяет вертикальное выравнивание элементов внутри flex контейнера

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

4. Выровнять элементы по центру (как горизонтали, так и вертикали)

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

.flex-container{ display: flex; justify-content: center;/* Выравнивание по горизонтали */ align-items: center;/* Выравнивание по вертикали */ border: 2px dashed #000; }

В результате получим: 

5. Изменять параметры, встроенных в контейнер элементов, очень просто.

Одна из проблем с использованием inline-block - стандартный отступ в 4px между элементами, и хотя обойти данную проблемы можно,задав отрицательный margin, это может повлечь за собой другие проблемы.

С flexbox мы можем без проблем использовать строчные элементы и выровнять их по всей ширине контейнера,задав такие стили:

.flex-container{display: flex;} .flex-item{width: 20%;}

Результатом данного действия увидим:

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

.flex-container{ display: flex; justify-content: space-around; }

Так же можно задать выравнивание только средних элементов, без использования first-child и last-child

.flex-container{ display: flex; justify-content: space-between; }

6. Сложные элементы легко создать

И одна из главных причин для использования flexbox`a - это простое создание сложных макетов. В предыдущих примерах было показано как работать с одиночными элементами. В данном примере покажу как работать с несколькими элементами внутри контейнера с display:flex

Для примера используем общий макет ценовой таблицы:

В ней видим три блока <div>, причем средний в два раза превышает ширину двух других. Для достижения данной верстки с помощью свойства flex, мы можем написать такой код:

.flex-container { display : flex ; /*Контейнеру задаем флекс для позиционирования внутренних элементов*/ align-items : center ; /*внутренние элементы выравниваем по вертикали } .flex-items:not(:nth-child(2)) { /*Для всех кроме второго элемента задаем размер равный единице и высоту, меньшую чем у среднего блока*/ flex-grow : 1 ; height : 300px ; } .flex-items:nth-child(2) { /*Для второго элемента зададим ширину 2, т.е. в два раза превышающую соседние элементы flex-items и высоту на 50px большую чем у других элементов*/ flex-grow : 2 ; height : 350px ; }

Отличные примеры верскти на flexbox: Полное руководство по flexbox

css3-html5.ru

flex-grow | CSS | WebReference

Определяет, сколько пространства может занимать флекс внутри контейнера. В качестве значения принимаются числа, они задают пропорции каждого флекса. К примеру, если для всех элементов установлено значение 1, то они получатся равного размера. Если какой-то элемент получил значение 2, то его размер будет в два раза больше остальных.

Краткая информация

Значение по умолчаниюНаследуетсяПрименяетсяАнимируется
0
Нет
К флекс-элементам
Да

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

Принимаются целые (1, 2, 3,…) или дробные числа (например: 0.6). Отрицательные значения игнорируются.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-grow</title> <style> form { width: 400px; margin: auto; } p { display: flex; } label { margin-right: 10px; } input, select { flex-grow: 1; } </style> </head> <body> <form action="handler.php"> <p> <label>Имя:</label> <input name="name"> </p> <p> <label>Какая у вас операционная система?:</label> <select name="os"> <option value="1">Windows</option> <option value="2">Linux</option> <option value="3">Mac OS</option> </select> </p> <p><button>Отправить</button></p> </form> </body> </html>

Результат данного примера показан на рис. 1.

Ширина полей формы

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-grow.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 24.08.2018

Редакторы: Влад Мержевич

webref.ru

flex-direction | CSS | WebReference

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

Краткая информация

Значение по умолчаниюНаследуетсяПрименяетсяАнимируется
row
Нет
К флекс-контейнеру
Нет

Синтаксис ?

flex-direction: row | row-reverse | column | column-reverse

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Значения

rowГлавная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево.row-reverseПохоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо.columnГлавная ось располагается вертикально и направлена сверху вниз.column-reverseГлавная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-direction</title> <style> .flex-row { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: row-reverse; } </style> </head> <body> <ul> <li><img src="image/thumb1.jpg" alt=""></li> <li><img src="image/thumb2.jpg" alt=""></li> <li><img src="image/thumb3.jpg" alt=""></li> </ul> </body> </html>

Объектная модель

Объект.style.flexDirection

Примечание

Safari до версии 9 поддерживает свойство -webkit-flex-direction.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 15.05.2018

Редакторы: Влад Мержевич

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

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