Flexbox

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

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

display: flex;

display:inline-flex

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

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

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

.korobka {display:flex; flex-flow: row wrap;}
.element {flex:1;}

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

Полезно по FLEX:

Для описания модуля 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-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.