Flexbox

Flexbox новая технология в CSS3 - для создания гибких макетов с выравниванием по вертикали и горизонтали.

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

1. Чтобы ваш блок стал Флексом нужно просто дать ему свойство css3: {display: flex;} или {display:inline-flex}, разница практически в автоматической ширине блока, в первом варианте блок растягиваются горизонтально, чтобы заполнить содержащий их блок, вовторм, блоки встроенного уровня уменьшаются, чтобы соответствовать их размеру внутренего содержания.

display: flex;

flex

display:inline-flex

inline-flex

2. Внутри Flex-контейнера, для дочерних элементов, ~~не работают такие CSS-свойства~~ как float, clear, vertical-align, column-, ::first-line и ::first-letter.

3. !!! Flexbox можно применять - ~~если Вам не нужна поддержка старых браузеров.~~


Chrome	Edge	Firefox	Internet	Opera	Safari
29	12	20	11	12.1	9


Android	Chrome	Edge	Firefox	Opera	Safari	Samsung
4.4	29	Yes	?	12.1	Yes	?

Флекс в двух строчках

Флекс в двух строчках:


.korobka {display:flex; flex-flow: row wrap;}
<div style="display: flex;">
  <div style="flex: 1;">Эта колонка будет шириной 25%</div>
  <div style="flex: 2;">Эта колонка будет шириной 50%</div>
  <div style="flex: 1;">Эта колонка будет шириной 25%</div>
</div>

<div style="display: flex; /* по горизонтали */  justify-content: center; /* по вертикали */  align-items: center;">
  <div> Любой внутренний элемент будет расположен по центру по двум осям </div>
</div>

Сетка на флексах

====
html {height: 100%;}
body {display: flex; flex-direction: column; height: 100%;}

/* Главная секция заполнит все свободное место на странице, которое не занял футер */
.main {flex: 1 0 auto;}

/* Футер заполнит столько вертикального пространства, сколько ему будет нужно, ни пикселем больше */
footer {flex: 0 0 auto;}
----
<body>  
  <div class="main"> Весь контент будет здесь </div>
  <footer> Футер </footer>
</body>
====

Выровнять колонки и содержимое по центру:

{display:flex; flex-direction: column; justify-content: center; align-content: space-between;  align-items: center;}

Лучшая демонстрация FLEX: Смотреть

Демо основных свойств flex-контейнера - online-demo flex-direction, justify-content, align-items: Смотреть

Демо свойств многострочности в flex - flex-wrap, align-content Смотреть

Демо для flex-grow, flex-shrink и flex-basis Смотреть

Демо для align-self и order Смотреть

О минусах flex-блоков:

1. Не следует использовать flexbox там, где в этом нет необходимости.
2. Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
3. Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
4. Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
5. Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
6. flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.). Это все еще спорный момент!

Полезно по FLEX:

1. Онлайн демонстрация свойств Флекс - перейти
2. Наглядный английский ресурс - перейти

Flexbox

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

Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.

Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).

Основной размер (main size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что из них находится в основном измерении, определяют основной размер flex-контейнера или flex-элемента.

Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.

Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.

Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.

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

~~Flexbox~~ ~~107~~ 0 4-07-2019, 16:09

Примеры наиболее частого использованя flexbox в css. Просто так их не придумали и у флексов есть то чего невозможно сделать с помощью обычного css. У Флексов есть минус - в контейнере (display: flex;) не работает абсолютное позиционирование.!

flex-shrink - Коэффициент сжатия

~~Flexbox~~ ~~136~~ 0 20-03-2019, 02:26

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

flex-basis - Начальный основной размер

~~Flexbox~~ ~~102~~ 0 20-03-2019, 02:19

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

flex-grow - Коэффициент роста

~~Flexbox~~ ~~125~~ 0 20-03-2019, 02:09

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

align-content - Пустое пространство по вертикали

~~Flexbox~~ ~~138~~ 0 20-03-2019, 01:14

Свойство CSS align-content устанавливает, как браузер распределяет пространство между элементами содержимого и вокруг них вдоль поперечной оси контейнера flexbox.

align-self - выравнивание по вертикали для одного елемента

~~Flexbox~~ ~~134~~ 0 20-03-2019, 00:59

CSS-свойство align-self выравнивает flex-элементы текущей flex-линии, переопределяя значение align-items. Если любой из полей поперечной оси элемента установлен на auto, то align-self игнорируется.

align-items - Выравнивание по вертикальной оси

~~Flexbox~~ ~~188~~ 0 20-03-2019, 00:45

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

Flexbox

display: flex;

display:inline-flex

Флекс в двух строчках:

Сетка на флексах

Выровнять колонки и содержимое по центру:

О минусах flex-блоков:

Полезно по FLEX:

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

flex-shrink - Коэффициент сжатия

flex-basis - Начальный основной размер

flex-grow - Коэффициент роста

align-content - Пустое пространство по вертикали

align-self - выравнивание по вертикали для одного елемента

align-items - Выравнивание по вертикальной оси

justify-content - Распределяет пространство между элементами

order Порядок елемента в flex контейнере

flex-flow

Опыт в веб разработке: