Верстка flexbox: Полное руководство по Flexbox / Хабр

Содержание

Полное руководство по Flexbox – учимся на примерах

Какой самый лучший способ понять Flexbox? Изучить основы и написать кучу разных штук. Именно этим мы и займемся.

Но сначала стоит кое-что уточнить:

Эта статья написана для разработчиков среднего уровня и предполагает, что вы уже имеете представление о Флексбоксах. Но…
Если вы в курсе, что такое CSS, но не имели дела с Флексбокс, то здесь находится исчерпывающий гид по технологии (статья в открытом доступе, необходимо, примерно, 45 минут на чтение).
А если вы не особо хороши в CSS, то я рекомендую вам Полное (Практическое) введение в CSS (платный курс, 74 лекции, английский язык).
Примеры из статьи можно реализовывать в произвольном порядке.
Флексбокс – всего лишь технология разметки. Реальные проекты одной только разметкой не ограничиваются.
Обозначения типа div.ohans означают что это элемент div с классом ohans.

Пример 1. Как сделать фотогалерею на Флексбокс

Разместить фотографии по строкам и столбцам на Флексбокс гораздо проще, чем многим кажется.

Рассмотрим простую сетку:

<main>

</main>

У нас есть main.gallery и 10 изображений в нем.
Убедимся, что main.gallery растягивается на весь доступный экран:

.gallery { min-height: 100vh }

.gallery {

min-height: 100vh

}

Кое-что об изображениях

По умолчанию все изображения inline-block элементы. У них есть ширина и высота. Они выстроятся в линию (только если они не слишком большие и могут все поместиться)

На старт

Сейчас наша галерея будет выглядеть следующим образом:

Размеры всех 10 изображений остались нетронутыми. При необходимости картинки переместятся на вторую строку. Послушные ребята =)

А теперь, на сцену выходит Флексбокс:

.gallery { display: flex }

.gallery {

display: flex

}

С этого момента поведение изображений изменилось. Из inline-block элементов они стали flex-items.
В результате применения Флексбокс к .gallery все картинки уместились в одну линию. Да еще и растянулись по вертикали, вот так:

Картинки теперь уместились все в одну линию, да еще и растянулись по вертикали. Жалкое зрелище =(

Все это результат стандартного поведения Флексбокс:

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

.gallery { flex-wrap: wrap }

.gallery {

flex-wrap: wrap

}

Это разрешит перенос элементов на другую строку как и полагается

Изображения перенесены

2. Теперь картинки располагаются в несколько линий. Но они все еще растянуты по вертикали и это определенно не характерно для изображений в галерее.
Свойство align-items флекс-контейнера по умолчанию равно значению stretch

Изменим его:

.gallery { … align-items: flex-start }

.gallery {

…

align-items: flex-start

}

Это защитит картинки от растягивания.

Кроме того они выровнены относительно начала вертикальной оси:

Теперь в нашей галерее неискаженные изображения. Почти такие же как и были, пока мы не подключили флексбокс

Наша мощная флексбокс-галерея готова.

Преимущества использования Флексбокс

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

Кроме легко получаемой адаптивности, преимущество флексбокс заключается в возможностях выравнивания.
Флекс-контейнер .gallery имеет несколько свойств для настройки выравнивания:

flex-direction: row , justify-content: flex-start и align-items: flex-start.
Разметку галереи можно легко поменять поигравшись со следующим значением:

.gallery { … justify-content:center; }

.gallery {

…

justify-content:center;

}

Теперь изображения идеально отцентрованы по горизонтали

Кроме того, картинки могут быть отцентрованы и по горизонтали и по вертикали .gallery.

.gallery { … justify-content:center; align-items: center; }

.gallery {

…

justify-content:center;

align-items: center;

}

А теперь изображения выровнены не только горизонтально, но и вертикально

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

Можете посмотреть на действующую Флексбокс галерею здесь.

Пример 2: Как сделать карточки на Флексбокс

Карточки очень популярны в интернете. Гугл, Твиттер, Пинтерест и прочие им подобные – все используют карточки.
В UI-дизайне карточка – это шаблон, объединяющий схожую информацию в адаптивный контейнер. Внешне он напоминает игральную карту.
Существует много хороших способов применения Карточек. Например, сетка с ценами.

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

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

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

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

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

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

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

Список текущих проблем модуля и кросс-браузерных решений для них вы можете прочитать в статье Philip Walton Flexbugs.

Что такое 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: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Основные понятия

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

Рис. 2. Режим строки и колонки

2. Flex-контейнер

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

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

.flex-container {
/*генерирует flex-контейнер уровня блока*/
display: -webkit-flex; 
display: flex; 
}
.flex-container {
/*генерирует flex-контейнер уровня строки*/
 display: -webkit-inline-flex;
 display: inline-flex; 
}

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

Рис. 3. Выравнивание элементов в модели flexbox

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

3. Flex-элементы

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

Для flex-элементов блокируется их значение свойства display. Значение display: inline-block; и display: table-cell; вычисляется в display: block;.
Пустое пространство между элементами исчезает: оно не становится своим собственным flex-элементом, даже если межэлементный текст обернут в анонимный flex-элемент. Для содержимого анонимного flex-элемента невозможно задать собственные стили, но оно будет наследовать их (например, параметры шрифта) от flex-контейнера.
Абсолютно позиционированный flex-элемент не участвует в компоновке гибкого макета.
Поля margin соседних flex-элементов не схлопываются.
Процентные значения margin и padding вычисляются от внутреннего размера содержащего их блока.
margin: auto; расширяются, поглощая дополнительное пространство в соответствующем измерении. Их можно использовать для выравнивания или раздвигания смежных flex-элементов.
Автоматический минимальный размер flex-элементов по умолчанию является минимальным размером его содержимого, то есть min-width: auto;. Для контейнеров с прокруткой автоматический минимальный размер обычно равен нулю.

4. Порядок отображения flex-элементов и ориентация

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

4.1. Направление главной оси: flex-direction

Свойство относится к 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`	Наследует значение свойства от родительского элемента.

Рис. 4. Свойство flex-direction для left-to-right языков

Синтаксис

.flex-container {
display: -webkit-flex; 
-webkit-flex-direction: row-reverse;
display: flex;
flex-direction: row-reverse;
}

4.2. Управление многострочностью flex-контейнера: flex-wrap

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

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

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

Рис. 5. Управление многострочностью с помощью свойства flex-wrap для LTR-языков

Синтаксис

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

4.3. Краткая запись направления и многострочности: flex-flow

Свойство позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств 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;
}

4.4. Порядок отображения flex-элементов: order

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

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

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

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-order: 1;
order: 1;
}

Рис. 6. Порядок отображения flex-элементов

5. Гибкость flex-элементов

Определяющим аспектом гибкого макета является возможность «сгибать» flex-элементы, изменяя их ширину / высоту (в зависимости от того, какой размер находится на главной оси), чтобы заполнить доступное пространство в основном измерении. Это делается с помощью свойства flex. Flex-контейнер распределяет свободное пространство между своими дочерними элементами (пропорционально их коэффициенту flex-grow) для заполнения контейнера или сжимает их (пропорционально их коэффициенту flex-shrink), чтобы предотвратить переполнение.

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

5.1. Задание гибких размеров одним свойством: 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`	Устанавливает значение свойства в значение по умолчанию. Эквивалентно `flex: 0 1 auto;`.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex: 3 1 100px; 
-ms-flex:  3 1 100px; 
flex:  3 1 100px;
}

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

Свойство определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства. Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства. Свойство не наследуется.

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

Рис. 7. Управление свободным пространством в панели навигации с помощью flex-grow

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex-grow: 3; 
flex-grow: 3;
}

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

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

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

Рис. 8. Сужение flex-элементов в строке

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex-shrink: 3; 
flex-shrink: 3;
}

5.4. Базовый размер: flex-basis

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

flex-basis
Значения:
`auto`	Значение по умолчанию. Элемент получает базовый размер, соответствующий размеру его содержимого (если он не задан явно).
`content`	Определяет базовый размер в зависимости от содержимого flex-элемента.
длина	Базовый размер определяется так же, как для ширины и высоты. Задается в единицах длины.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Синтаксис

.flex-container {
display: -webkit-flex;
display: flex;
}
.flex-item {
-webkit-flex-basis: 100px; 
flex-basis: 100px;
}

6. Выравнивание

6.1. Выравнивание по главной оси: justify-content

Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами. Когда элемент преобразуется в flex-контейнер, flex-элементы по умолчанию сгруппированы вместе (если для них не заданы поля margin). Промежутки добавляются после расчета значений margin и flex-grow. Если какие-либо элементы имеют ненулевое значение flex-grow или margin: auto;, свойство не будет оказывать влияния. Свойство не наследуется.

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

Рис. 9. Выравнивание элементов и распределение свободного пространства с помощью свойства justify-content

Синтаксис

.flex-container {
display: -webkit-flex; 
-webkit-justify-content: flex-start;
display: flex;
justify-content: flex-start;
}

6.2. Выравнивание по поперечной оси: align-items и align-self

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

6.2.1. Align-items

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

align-items
Значения:
`flex-start`	Верхний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей `margin` и рамок `border` элемента), проходящей через начало поперечной оси.
`flex-end`	Нижний край flex-элемента помещается вплотную с flex-линией (или на расстоянии, с учетом заданных полей `margin` и рамок `border` элемента), проходящей через конец поперечной оси.
`center`	Поля flex-элемента центрируется по поперечной оси в пределах flex-линии.
`baseline`	Базовые линии всех flex-элементов, участвующих в выравнивании, совпадают.
`stretch`	Если поперечный размер flex-элемента вычисляется как `auto` и ни одно из поперечных значений `margin` не равно `auto`, элемент растягивается. Значение по умолчанию.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Рис. 10. Выравнивание элементов в контейнере по вертикали

Синтаксис

.flex-container {
display: -webkit-flex;
-webkit-align-items: flex-start;
display: flex;
align-items: flex-start;
}

6.2.2. Align-self

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

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

Рис. 11. Выравнивание отдельных flex-элементов

Синтаксис

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

6.3. Выравнивание строк flex-контейнера: align-content

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

align-content
Значения:
`flex-start`	Строки укладываются по направлению к началу flex-контейнера. Край первой строки помещается вплотную к краю flex-контейнера, каждая последующая — вплотную к предыдущей строке.
`flex-end`	Строки укладываются по направлению к концу flex-контейнера. Край последней строки помещается вплотную к краю flex-контейнера, каждая предыдущая — вплотную к последующей строке.
`center`	Строки укладываются по направлению к центру flex-контейнера. Строки расположены вплотную друг к другу и выровнены по центру flex-контейнера с равным расстоянием между начальным краем содержимого flex-контейнера и первой строкой и между конечным краем содержимого flex-контейнера и последней строкой.
`space-between`	Строки равномерно распределены в flex-контейнере. Если оставшееся свободное пространство отрицательно или в flex-контейнере имеется только одна flex-линия, это значение идентично `flex-start`. В противном случае край первой строки помещается вплотную к начальному краю содержимого flex-контейнера, край последней строки — вплотную к конечному краю содержимого flex-контейнера. Остальные строки распределены так, чтобы расстояние между любыми двумя соседними строками было одинаковым.
`space-around`	Строки равномерно распределены в flex-контейнере с половинным пробелом на обоих концах. Если оставшееся свободное пространство отрицательно, это значение идентично цент`center`. В противном случае строки распределяются таким образом, чтобы расстояние между любыми двумя соседними строками было одинаковым, а расстояние между первой / последней строками и краями содержимого flex-контейнера составляло половину от расстояния между строками.
`stretch`	Значение по умолчанию. Строки flex-элементов равномерно растягиваются, заполняя все доступное пространство. Если оставшееся свободное пространство отрицательно, это значение идентично `flex-start`. В противном случае свободное пространство будет разделено поровну между всеми строками, увеличивая их поперечный размер.
`initial`	Устанавливает значение свойства в значение по умолчанию.
`inherit`	Наследует значение свойства от родительского элемента.

Рис. 12. Многострочное выравнивание 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;
}

По материалам CSS Flexible Box Layout Module Level 1

Верстаем новостной сайт с помощью Flexbox / Хабр

Примечание: этот материал представляет собой свободный перевод статьи Джереми Томаса о том, как просто работать с Flexbox на примере верстки шаблона новостного сайта.

Поверьте, нет никакой необходимости в детальном разборе всех аспектов работы с Flexbox, если вы хотите начать им пользоваться уже сейчас. В этом руководстве автор собирается познакомить вас с некоторыми свойствами Flexbox и сделать «новостной лейаут» наподобие того, который вы могли видеть на сайте The Guardian.

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

Ну, поехали!

1. Начинаем с создания двух столбцов

Создание столбцов при помощи CSS всегда влекло за собой определенные трудности. На протяжении длительного времени для выполнения данной задачи широко использовались (и используются) float’ы и / или таблицы, но каждый из этих методов имел (и имеет) свои недостатки.

В свою очередь, Flexbox упрощает этот процесс, обладая рядом таких преимуществ, как:

— написание более «чистого» кода: от нас лишь требуется создать контейнер с правилом display: flex;
— гибкость: мы можем изменять размер, растягивать и выравнивать столбцы путем изменения пары строк CSS;
— семантическая разметка;
— кроме того, с использованием Flexbox отпадает необходимость отменять обтекание во избежание непредсказуемого поведения лейаута.

Давайте начнем работу с создания двух столбцов, один из которых будет занимать 2/3 ширины нашего контейнера, а еще один — 1/3 его часть.

<div>
  <div>
    2/3 column
  </div>
  <div>
    1/3 column
  </div>
</div>

Здесь присутствуют два элемента:

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

.columns {
  display: flex;
}

.column {
  flex: 1;
}

.main-column {
  flex: 2;
}

Поскольку main-column имеет значение flex равное 2, то этот столбец займет в два раза больше места, чем второй.

Добавим немного визуального оформления и, в итоге, получим:

Кликните для просмотра в действии

2. Делаем каждый столбец flexbox-контейнером

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

Итак, нам необходимо, чтобы статьи:

— располагались вертикально внутри столбца-контейнера;
— занимали все доступное место.

Правило flex-direction: column, указанное для контейнера, вместе с правилом flex: 1, указанным для дочернего элемента, позволяет статье заполнить все свободное место по вертикали, при этом высота первых двух столбцов останется неизменной.

Кликните для просмотра в действии

3. Делаем контейнер из статьи

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

— заголовок;
— параграф;
— информационную панель с именем автора и количеством комментариев;
— какую-нибудь адаптивную картинку.

Здесь мы используем Flexbox для того, чтобы «прижать» информационную панель к низу элемента. Вот, посмотрите, какой результат мы ожидаем получить.

А вот и сам код:

<a>
  <figure>
    <img src="">
  </figure>
  <div>
    <h3>
      <!-- Заголовок -->
    </h3>
    <p>
      <!-- Контент -->
    </p>
    <footer>
      <!-- Информация -->
    </footer>
  </div>
</a>

.article {
  display: flex;
  flex-direction: column;
  flex-basis: auto; /* Устанавливает начальный размер элемента в зависимости от его содержимого */
}
 
.article-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}
 
.article-content {
  flex: 1; /* Содержимое заполняет все оставшееся место, тем самым прижимая информационную панель к нижней части */
}

Элементы внутри статьи расположены вертикально благодаря использованию правила flex-direction: column.

Также мы применили свойство flex: 1 к элементу article-content, тем самым растянув его на все свободное место и прижав article-info к низу. Высота столбцов в этом случае не имеет значения.

Кликните для просмотра в действии

4. Добавляем несколько вложенных столбцов

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

<div>
  <div>
    <a>
      <!-- Содержимое статьи -->
    </a>
  </div>
 
  <div>
    <a>
      <!-- Содержимое статьи -->
    </a>
    <a>
      <!-- Содержимое статьи -->
    </a>
    <a>
      <!-- Содержимое статьи -->
    </a>
  </div>
</div>

Поскольку мы хотим, чтобы первый вложенный столбец был шире, добавим к элементу класс nested-column, а в CSS укажем:

.nested-column {
  flex: 2;
}

Теперь этот столбец будет вдвое шире второго.

Кликните для просмотра в действии

5. Делаем первую статью с горизонтальным лейаутом

Первая статья у нас на самом деле большая. Дабы эффективно использовать место на экране монитора, давайте изменим ее ориентацию на горизонтальную.

.first-article {
  flex-direction: row;
}
 
.first-article .article-body {
  flex: 1;
}
 
.first-article .article-image {
  height: 300px;
  order: 2;
  padding-top: 0;
  width: 400px;
}

Свойство order в данном случае играет большую роль, поскольку оно позволяет изменять очередность HTML-элементов без изменения HTML-разметки. В действительности, article-image в коде идет перед элементом article-body, но ведет себя так, будто стоит после него.

Кликните для просмотра в действии

6. Делаем адаптивный лейаут

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

Одной из замечательных вещей в Flexbox является то, что достаточно удалить правило display: flex в контейнере для того, чтобы полостью отключить его (Flexbox), в то время, как остальные его свойства (такие, как align-items или flex) останутся рабочими.

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

Итак, мы собираемся удалить display: flex из селекторов .columns и .column, вместо этого «запаковав» их в медиа-запрос:

@media screen and (min-width: 800px) {
  .columns,
  .column {
    display: flex;
  }
}

Вот и все! На экранах с маленьким разрешением все статьи будут располагаться друг над другом, а на экранах с разрешением свыше 800 пикселей — в два столбца.

7. Добавляем завершающие штрихи

Для того, чтобы лейаут выглядел более привлекательно на больших экранах, давайте добавим кое-какие CSS-твики:

@media screen and (min-width: 1000px) {
  .first-article {
    flex-direction: row;
  }

  .first-article .article-body {
    flex: 1;
  }

  .first-article .article-image {
    height: 300px;
    order: 2;
    padding-top: 0;
    width: 400px;
  }

  .main-column {
    flex: 3;
  }

  .nested-column {
    flex: 2;
  }
}

Содержимое первой статьи выровнено по горизонтали: текст расположен по левой стороне, а картинка — по правой. Также, главный столбец теперь стал шире (75%). То же самое касается и вложенного столбца (66%).

А вот и финальный результат!

Кликните для просмотра в действии

Вывод

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

Flexbox — Изучение веб-разработки | MDN

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

Необходимые навыки:	HTML основы (изучите Введение в HTML), знание того, как работает CSS (изучите Вступление в CSS).
Цель:	Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов.

Почему Flexbox?

Долгое время единственными надёжными инструментами CSS верстки были такие способы как Float (обтекание) и позиционирование.

С их помощью сложно или невозможно достичь следующих простых требований к макету:

Вертикального выравнивания блока внутри родителя.
Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.

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

Разберём простой пример

В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — flexbox0.html с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете посмотреть его вживую.

Вы увидите элемент <header> с заголовком верхнего уровня внутри, и элемент <section> содержащий три элемента <article>. Мы будем использовать их для создания стандартного трехколоночного макета.

Определяем, какие элементы разместить в виде flex блоков

Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение display в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы <article>, поэтому мы устанавливаем это значение на <section> (который становится flex контейнером):

section {
  display: flex;
}

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

Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.

Примечание: Вы также можете установить значение display inline-flex, если хотите расставить inline элементы как flex блоки.

Внутри flex модели

Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:

Главная ось (main axis) проходит в том направлении, вдоль которого расположены Flex элементы (например, в строку слева направо или вдоль колонок вниз.) Начало и конец этой оси называются main start и main end.
Поперечная ось (сross axis) проходит перпендикулярно Flex элементам. Начало и конец этой оси называются cross start and cross end.
Родительский элемент, на который назначено свойство display: flex ( <section> в нашем примере) называется flex container.
Элементы, размещённые в нём как Flex блоки называются flex items (в нашем примере это <article> ).

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

Столбцы или строки?

В Flexbox есть свойство под названием flex-direction, которое определяет направление главной оси (в каком направлении располагаются flexbox-дочерние элементы) — по умолчанию ему присваивается значение row, т.е. располагать дочерние элементы в ряд слева направо (для большинства языков) или справа налево (для арабских языков).

Попробуйте добавить следующую строчку в ваш файл:

flex-direction: column

Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.

Примечание: Вы можете также распологать flex элементы в обратном направлении, используя значения row-reverse и column-reverse. Попробуйте их тоже!

Перенос строк

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

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

flex-wrap: wrap

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

Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство flex: 200px, установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.

Но мы можем пойти дальше. Прежде всего, попробуйте изменить значение свойства flex-direction на row-reverse — теперь у вас также макет в несколько строк, но он начинается из противоположного угла окна браузера и теперь выстраивается в обратном порядке.

flex-flow сокращение

На этом этапе нужно заметить, что существует сокращение для свойств flex-direction и flex-wrap — flex-flow. Например, вы можете заменить

flex-direction: row;
flex-wrap: wrap;

на

flex-flow: row wrap;

Гибкое изменение размеров flex элементов

Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла flexbox0.html, или скачайте flexbox1.html (просмотр).

Прежде всего, добавим следующее правило в конец вашего CSS кода:

article {
  flex: 1;
}

Это безразмерное значение пропорции, которое указывает, сколько свободного пространства на главной оси (main axis) каждый flex элемент сможет занять. В этом случае, мы даём каждому элементу <article> значение 1, а это значит, что они будут занимать равное количество свободного места в макете, которое осталось после установки свойств padding и margin.

Теперь добавьте следующее правило в строку после предыдущего:

article:nth-of-type(3) {
  flex: 2;
}

Обновив страницу, вы увидите, что третий элемент <article> занимает в два раза больше доступной ширины, чем два других — итого теперь доступно 4 единицы пропорции. Первые два flex элемента имеют по одной единице, поэтому берут 1/4 пространства каждый. А у третьего 2 единицы, так что он берёт 2/4 свободного места (или 1/2).

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

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

Это просто означает, что каждому flex элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций. Обновите страницу, и вы увидите разницу, как пространство поделено теперь.

Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент <article>, макет будет и дальше выглядеть также хорошо.

flex: краткий код против развёрнутого

flex это сокращённое свойство, в которым можно задать до трёх разных свойств:

Значение пропорции, которое мы обсуждали выше. Оно может быть установлено отдельно с помощью свойства flex-grow.
Следующее значение пропорции — flex-shrink — вступает в роль, когда flex элементы переполняют контейнер. Оно указывает, сколько забирается от размера каждого flex элемента, чтобы он перестал переполнять контейнер. Это продвинутая функция flexbox, и в этом параграфе мы не будем её разбирать.
Значение минимального размера, как мы обсуждали ранее. Оно может быть установлено отдельно с помощью свойства flex-basis.

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

Горизонтальное и вертикальное выравнивание

Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — flex-align0.html (просмотр) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.

Сначала сделайте себе копию этого примера.

Теперь добавьте следующую строку в низ кода CSS:

div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

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

align-items контролирует, где на поперечной оси находятся flex элементы.

По умолчанию стоит значение stretch, которое растягивает все flex элементы, чтобы заполнить родителя вдоль поперечной (cross axis) оси. Если у родителя нет фиксированной ширины вдоль поперечной оси, все flex элементы примут длину самого длинного flex элемента. Вот почему наш первый пример по умолчанию получил столбцы с одинаковой высотой.
Значение center , которое мы использовали в коде вверху, заставляет элементы сохранять свои собственные размеры, но центрирует их вдоль поперечной оси. Вот почему кнопки текущего примера центрированы по вертикали.
Также есть значения flex-start и flex-end, которые выравнивают все элементы по началу и концу поперечной оси соответственно. См. подробнее align-items.

Вы можете переопределить align-items поведение для отдельных flex элементов, применив свойство align-self к ним. Например, попробуйте добавить эти строки в код:

button:first-child {
  align-self: flex-end;
}

Посмотрите, что произошло и удалите эти строки.

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

По умолчанию стоит значение flex-start, которое располагает все элементы в начале главной оси.
Также можно использовать flex-end, чтобы расположить их в конце.
center — также одно из значений justify-content, располагает все элементы по центру главной оси.
Значение, которое мы использовали выше, space-around, весьма полезно — оно распределяет все элементы равномерно по главной оси, с небольшим количеством свободного места на обоих концах.
И ещё одно значение, space-between, которое очень похоже на space-around, за исключением того, что оно не оставляет места на обоих концах.

Попробуйте немного поиграть с этими значениями прежде чем продолжить

Порядок элементов flex

В Flexbox также есть возможность менять порядок расположения flex элементов, не влияя на исходный порядок. Это ещё одна вещь, которую невозможно сделать традиционными методами CSS.

Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:

button:first-child {
  order: 1;
}

и теперь вы увидите, что кнопка «Smile» переместилась в конец главной оси. Давайте теперь поговорим подробнее о том, как это работает:

По умолчанию все элементы flex имеют значение order равное 0.
Элементы Flex с установленными на них бОльшими значениями будут отображаться позже в порядке отображения, чем элементы с меньшими значениями порядка.
Элементы Flex с одинаковым значением порядка будут отображаться в исходном порядке. Так, если у вас есть четыре элемента с порядковыми значениями 2, 1, 1 и 0, установленными на них соответственно, их порядок отображения будет 4-й, 2-й, 3-й, затем 1-й.
Третий элемент появляется после второго, потому что он имеет то же значение порядка и находится после него в порядке написания.

Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:

button:last-child {
  order: -1;
}

Вложенные flex блоки

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

HTML для этого довольно простой. У нас есть элемент <section>, содержащий три <article>. Третий <article> содержит ещё три <div>.

section - article
          article
          article - div - button   
                    div   button
                    div   button
                          button
                          button

Давайте посмотрим на код, который мы использовали для макета.

Прежде всего, мы устанавливаем дочерние элементы <section> в виде flex блоков.

section {
  display: flex;
}

Затем мы устанавливаем несколько значений на самих <article>. Обратите внимание на второе правило: мы устанавливаем третий <article>, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}

Затем мы берём первый <div>. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы <button>) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.

article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

Наконец, мы устанавливаем размер кнопке, мы даем ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.

button {
  flex: 1;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}

Совместимость с браузерами

Поддержка Flexbox доступна в большинстве новых браузеров: Firefox, Chrome, Opera, Microsoft Edge и IE 11, более поздних версиях Android / iOS и т. д.. Однако помните, что до сих пор используются более старые браузеры, которые не поддерживают Flexbox ( или поддерживают, но старую версию.)

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

Flexbox немного сложнее, чем некоторые функции CSS. Например, если в браузере отсутствует поддержка CSS тени, сайт по-прежнему будет можно использовать. А вот неподдерживаемые функции flexbox, возможно, полностью сломают макет, что сделает сайт непригодным.

Мы обсудим возможности преодоления проблем поддержки кросс-браузерности в следующем модуле.

Подытожим

Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим еще один важный аспект макетов CSS — grid-системы.

интерфейсы сайта от начала и до конца

От автора: дни костылей на свойствах float и margin канули в небытие, и в CSS появились новые замечательные свойства, отлично подходящие на эту роль. Такие трюки, как вертикальное выравнивание внутри блока, равномерное распределение места, контроль за сортировкой элементов и прилипающий футер, почти невозможны без flexbox.

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

Гибкие атомарные компоненты

Основная идея интерфейса сайта Tracks заключается в изолированности каждой части дизайна. Эта идея была изложена Brad Frost.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Рисунок 1. Карточки отображаются по принципу атомарного веб-дизайна. Можете угадать, какие из них сделаны на flexbox?

Если хотите углубиться в теорию атомарного дизайна, прочитайте статью Brad’s post. Также стоит прочитать его книгу.

Рисунок 2. Изначальный интерфейс Tracks, вобравший все преимущества как flexbox, так и атомарного дизайна.

Интерфейс представляет из себя набор компонентов InVision. Во время первой проверки интерфейса я начал искать подходящие места для flexbox. Я решил применять flexbox на страницах с известными шаблонами типа «сайдбар слева, основной контент справа», которые зачастую выполнены на устаревшем свойстве float.

Одним из положительных моментов в редизайне Tracks был тот, что сайт должен был хорошо работать в Internet Explorer (IE) 10+, Android 4.1+ и iOS 7+. Это была просто замечательная новость, так как все они отлично поддерживают flexbox с соответствующими префиксами. Даже несмотря на стабильную поддержку в наши дни, скажем, для Android 4.1 требуется на всякий случай сделать фолбэк. А как будет выглядеть тот же фолбэк, если свойство вообще не поддерживается браузером? С помощью Modernizr и класса .no-flexbox разработчики могут определить эти самые браузеры и найти стабильные шаблоны (в противном случае можно воспользоваться CSS запросами @supports). К примеру:

<ul>

</ul>

html.flexbox ul.flexbox-target, html.no-js ul.flexbox-target { display: flex; flex-direction: row; } html.no-flexbox ul.flexbox-target li, html.no-js ul.flexbox-target li { display: inline-block; /* Could also use a float-positioned-layout system instead */ }

html.flexbox ul.flexbox-target,

html.no-js ul.flexbox-target {

display: flex;

flex-direction: row;

}

html.no-flexbox ul.flexbox-target li,

html.no-js ul.flexbox-target li {

display: inline-block; /* Could also use a float-positioned-layout system instead */

}

Там, где не совсем ясно, поддерживается ли flexbox, мы будем использовать на всякий случай display: inline-block. Также, чтобы элемент не использовался в JS, добавим к нему класс no-js. Наследование в CSS не нарушится в случае, если flexbox не поддерживается или не загрузился JS. Flexbox прекрасно сосуществует с такими свойствами, как float и display: table, относительным позиционированием. Браузер всегда будет позиционировать flexbox выше остальных свойств, если он поддерживается. А если не поддерживается, будут применены обычные свойства.

Как и везде, наш выбор зависит от аудитории браузеров, аналитики и бюджета. У меня есть золотое правило – всегда делать выбор в пользу самого важного условия.

Инлайновые шаблоны

Компоненты меню оказались крайне полезны в flexbox, не только из-за легкости создания, но и из-за ускорения процесса разработки. Благодаря flexbox инлайновые шаблоны, которые раньше отнимали у разработчиков массу времени, теперь занимают всего лишь минуты. Если вы имели честь применять данный шаблон в версиях IE до 9, вы знаете про это чувство разочарования.

Рисунок 3. Панель администратора использует инлайновый шаблон, кнопки меню вертикально центрированы.

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

<header role=»banner»> <nav role=»navigation»> <a href=»pipeline.html»>Back to pipeline</a> <a href=»account.html»>Account</a> <a href=»users.html»>Users</a> <a href=»export.html»>Export</a> </nav> </header>

<a href=»pipeline.html»>Back to pipeline</a>

<a href=»account.html»>Account</a>

<a href=»users.html»>Users</a>

<a href=»export.html»>Export</a>

</nav>

</header>

И соответствующие стили:

nav[role=»navigation»] { display: flex; align-items: center; /* вертикальное центрирование */ } nav[role=»navigation»] a { display: inline-block; /* во избежание проблем с линейным отображением в IE 10 */ } nav[role=»navigation»] a[href=»pipeline.html»] { flex: 1; }

nav[role=»navigation»] {

display: flex;

align-items: center; /* вертикальное центрирование */

}

nav[role=»navigation»] a {

display: inline-block; /* во избежание проблем с линейным отображением в IE 10 */

}

nav[role=»navigation»] a[href=»pipeline.html»] {

flex: 1;

}

Это самый минимум, как разметки, так и стилей. Обратите внимание на значение inline-block, заданное ссылкам. Это значение решает проблему с сортировкой элементов с помощью свойства order в IE10. Также были выявлены проблемы с дочерними элементами контейнера flexbox, если задать им любой padding или margin. Лучше всего постоянно проверять работу свойств во всех браузерах и платформах.

Рисунок 4. В сети часто можно встретить такой шаблон. Шаблон меню хедера с центрированным логотипом с помощью flexbox.

Инлайновый шаблон выше обычно реализуется с помощью несемантической разметки. С появлением flexbox подход немного изменился. Шаблон состоит из ссылок меню по левому краю, центрированного логотипа и дополнительных элементов по правому краю. Разметка выглядит так:

</header>

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

Для выстраивания элементов в ряд до появления flexbox раньше разработчики использовали display: inline-block и даже float: left. Теперь flexbox самый лучший вариант, разработчикам больше не нужно использовать костыли, чтобы создать красивый интерфейс. Стили для этого шаблона немного длиннее, чем для шаблона меню на рисунке 3. Но эти стили легче писать, чем те, о которых мы говорили раньше.

.pipeline-header { display: flex; align-items: center; justify-content: space-between; } .pipeline-header > a { display: inline-block; /* IE 10 не знает свойства order, с помощью этого свойства мы избежим лишних проблем. */ } .pipeline-logo { flex: 1; order: 2; text-align: center; } .pipeline-nav { flex: 1.25; order: 1; } .pipeline-search { flex: 1; order: 3; } a[href=»#menu»] { order: 4; }

.pipeline-header {

display: flex;

align-items: center;

justify-content: space-between;

}

.pipeline-header > a {

display: inline-block; /* IE 10 не знает свойства order, с помощью этого свойства мы избежим лишних проблем. */

}

.pipeline-logo {

flex: 1;

order: 2;

text-align: center;

}

.pipeline-nav {

flex: 1.25;

order: 1;

}

.pipeline-search {

flex: 1;

order: 3;

}

a[href=»#menu»] {

order: 4;

}

В шаблоне на рисунке 4 можно с легкостью изменять последовательность элементов. Если потребуется сместить логотип, просто воспользуйтесь свойством order. Помните, что последовательность элементов в коде очень важна для поисковиков; особенно в случае с разными браузерами. Все браузеры и скрин ридеры используют код для определения последовательности элементов, а не визуальный порядок в CSS. Это нужно при использовании стрелок на клавиатуре.

Рисунок 5. Правильное расположение элементов в разметке (слева) и измененное с помощью flexbox визуальное расположение объектов (справа).

Ниже код для рисунка 5. Разметка никогда не изменяет порядок отображения элементов.

<div>

</div>

А это стили, с помощью которых получается правая часть изображения 5.

.container { display: flex; flex-direction: columns; /* по умолчанию row */ } header { order: 2; } main { order: 3; } footer { order: 1; }

.container {

display: flex;

flex-direction: columns; /* по умолчанию row */

}

header {

order: 2;

}

main {

order: 3;

}

footer {

order: 1;

}

Этот шаблон используется не только для меню, но и для футера.

Рисунок 6. Точно такой же шаблон, только теперь он применен для футера.

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

Инлайновые input’ы

Формы могут быть сущим адом, особенно если они были заточены под шаблон сетки в форошопе. «Инлайновые лейблы» укоренились в веб-дизайне так же, как и легендарная гитара Fender Stratocaster в рок музыке.

Рисунок 7. Еще один прекрасный способ применить flexbox – инлайновые лейблы и инпуты. Но внимательно следите за длиной текста в лейбле, чтобы он не сдвигал инпут на новую строку.

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

Рисунок 8. Необходимо решить, как будет расположен контент. Слева таблица с вертикальным выравниванием посередине. Справа flexbox с выравниванием элементов по центру.

Этот скриншот явно указывает на недостатки flexbox при работе с динамическим или очень длинном контентом. Эффект на правом изображении я называю «центральный сдвиг», контент движется от центра к краям вдоль осей X и Y. Разметка рисунка 8.

<div>

</div>

Чтобы контролировать длинный текст в это случае лучше воспользоваться свойством display: table. В таком случае контент будет просто идти вниз, а не из центра к краям.

.form-group { display: flex; } .form-group label { display: table; vertical-align: middle; } .form-group input { flex: 1; }

.form-group {

display: flex;

}

.form-group label {

display: table;

vertical-align: middle;

}

.form-group input {

flex: 1;

}

Совместное использование display table и flexbox это отличная методика. Я рекомендую вам ее изучить. При использовании обоих свойств постоянно смотрите на появление багов.

Рисунок 9. Инлайновые инпут и кнопка. Одинаковая высота балансирует дизайн.

Я повидал множество похожих шаблонов поля поиска. Данный шаблон настолько универсален, что его можно применить на совершенно любом макете. Конечно, существуют отдельные CSS свойства, связанные с контекстом, но они хранятся отдельно. HTML разметка типична: DIV оболочка с элементами, создающие структуру flexbox:

<div>

</div>

.form-group { display: flex; } .form-group input { flex: 1; }

.form-group {

display: flex;

}

.form-group input {

flex: 1;

}

Выпадающее меню

Рисунок 10. С помощью парочки flexbox способов область выпадающего меню слегка подсвечена.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Рисунок 11. Для первичного меню при создании меню использовался исключительно flexbox.

Разметка меню:

<nav> <div> <a href=»export-data.html»>Export</a> <a href=»help.html»>Get Help</a> </div> <div> <a href=»account.html»>Account</a> <a href=»preferences.html»>Preferences</a> <a href=»users.html»>Users</a> <a href=»payment.html»>Payments</a> <a href=»logout.html»>Logout</a> </div> </nav>

<nav>

<div>

<a href=»export-data.html»>Export</a>

</div>

<div>

<a href=»account.html»>Account</a>

<a href=»preferences.html»>Preferences</a>

<a href=»users.html»>Users</a>

<a href=»payment.html»>Payments</a>

<a href=»logout.html»>Logout</a>

</div>

</nav>

CSS стилей очень мало и их легко читать. Все как любят разработчики.

.menu { display: flex; } .menu__options { display: flex; align-items: center; } .menu__items { display: flex; flex-direction: column; }

.menu {

display: flex;

}

.menu__options {

display: flex;

align-items: center;

}

.menu__items {

display: flex;

flex-direction: column;

}

Пара строк кода и получается идеальная верстка. Кроме всего прочего, данное меню автономно, а стили и разметка полностью семантичны. Вот и еще один пример преимущества flexbox перед замысловатым позиционированием и костылями в разметке.

Рисунок 12. Шаблон с медиа объектом. SVG фиксированной ширины расположен слева, а справа примыкает контент.

В этом универсальном шаблоне, известном как «медиа объект», такие элементы как изображения или видео располагаются по одну сторону, а контент прилегает к ним по другую.

<div>

</div>

.medi-obj { display: flex; align-items: flex-start; } .media-obj__body { flex: 1; }

.medi-obj {

display: flex;

align-items: flex-start;

}

.media-obj__body {

flex: 1;

}

Я рекомендую прочитать всем статью Solved by Flexbox Philip Walton на его сайте. Филипп дает полезные советы применения конкретных шаблонов вместе с flexbox, а также он постоянно обновляет все шаблоны в своем репозитории.

С этим шаблоном flexbox работает идеально, однако следите за тем, как прилегающий контент будет вести себя при изменении размера окна браузера. На видео выше видно, как уменьшается расстояние между изображением и тексом, и текст, в конце концов, накладывается поверх изображения. Быть может это глуповатый пример. Кто из здравомыслящих людей будет так сильно сжимать окно браузера? Но перед использованием flexbox очень важно понять, как контент взаимодействует с окружением. Решением будет установить для изображения max-width: 100%.

Календарь.

Было бы очень глупо не вспомнить про календарь. Вы можете задаться вопросом «А почему не воспользоваться таблицей?». Календарь построен по методике date-picker, и я решил разграничить кнопки дней, месяцев и года (каждый недельный ряд находится в отдельном DIV). Такой подход облегчит разметку. Большое спасибо Shane Hudson за объяснение методики. Разметка календаря на самом деле крайне проста.

<div> <header> <button>Left Arrow</button> <span>2015</span> <button>Right Arrow</button> </header> <div> <button>Jan</button> <button>Feb</button> </div> </div>

<div>

<button>Left Arrow</button>

<button>Right Arrow</button>

</header>

<div>

</div>

Код CSS очень короткий, короче просто быть не может. И тем не менее он понятен.

.flex-container { display: flex; } .datepicker__header { justify-content: space-between; } .datepicker__view { align-items: center; justify-content: flex-start; }

.flex-container {

display: flex;

}

.datepicker__header {

justify-content: space-between;

}

.datepicker__view {

align-items: center;

justify-content: flex-start;

}

Рисунок 14.Слева используется justify-content: space-between. Справа justify-content: flex-start.

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

Макет

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

Рисунок 15. Сайдбар слева и основной контент справа – идеальный сценарий для flexbox. Это напомнило мне о технике имитации колонок.

Код также очень маленький, как и код для старых браузеров. Разметка панели администратора построена на нескольких DIV’ах.

<div>

<div>

</div>

.admin-ui__body { display: flex; } .admin-ui__body nav { flex: 30%; } .admin-ui__body main { flex: 70%; }

.admin-ui__body {

display: flex;

}

.admin-ui__body nav {

flex: 30%;

}

.admin-ui__body main {

flex: 70%;

}

Такой подход отлично подходит для случая со старыми браузерами, как на рисунке 14. Шаблон крайне прост. В любой момент можно добавить display: table.

В этом примере CSS 2 свойство display: table-cell это отличный фолбэк под старые браузеры. Элементы ведут себя, как ячейки таблицы. А нам именно такое поведение и нужно, ведь оно полностью имитирует работу flexbox. С помощью display: table-header-group и display: table-footer-group даже можно изменить порядок отображения элементов.

Sticky футер

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

Рисунок 16. Стики футер в правом сайдбаре.

<div> <button>Save Deal</button> <div> <p>…</p> <button>Copy</button> <button>Delete</button> </div> </div>

<div>

<div>

<button>Delete</button>

</div>

.admin-edit { display: flex; flex-direction: column; justify-content: space-between; }

.admin-edit {

display: flex;

flex-direction: column;

justify-content: space-between;

}

Футер отлично работает во всех браузерах вплоть до IE6.

Демо. Flexbox прилипающий футер с фолбэком display table. Работает вплоть до IE6!

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

Пайплайн.

С помощью flexbox мне удалось красиво расположить весь контент внутри карточек. Весь сайт, как фильм «Начало» — Flexbox содержит внутри себя flexbox и т.д. Все это поражает воображение, особенно если учесть, что раньше разработчики писали тонны кода для простого центрирования элемента. А сейчас это можно сделать всего парой строк.

Будьте осторожны

Во время тестов мы обнаружили, что свойство flex в тандеме с padding или margin полностью ломает макет в IE10.

.parent { display: flex; } .parent .child { flex: 1; padding: 20px; /* Ломает макет в IE 10 */ }

.parent {

display: flex;

}

.parent .child {

flex: 1;

padding: 20px; /* Ломает макет в IE 10 */

}

У родителя стоит свойство display: flex. А дочерние элементы со свойствами flex и padding ломают макет. Запрос типа @supports (display: flex) {} должен работать наподобие Modernizr, только тут чистый CSS. Но к сожалению, поддержка данного запроса не велика на сегодняшний день. Вместо него можно использовать:

Используйте класс no-flexbox библиотеки Modernizr

Для центрирования используйте трансформации или display table

Используйте table display

Порядок элементов можно настроить с помощью table-caption, table-header-group и table-footer-group

Для фолбэка основной структуры макета используйте свойство float

Для фолбэка инлайновых шаблонов используйте свойство display: inline или inline-block

Используйте условные комментарии для IE9 и ниже

У Ian Devlin есть отличная статья Объяснение техники стека. В ней он объясняет, как контролировать порядок элементов с помощью table-caption, table-header-group и table-footer-group.

Заключение

Flexbox’ом на сегодня очень даже можно пользоваться. После стольких лет разработки, спецификация, наконец, стала более менее стабильной, позволяя достичь высот, которые раньше были только в мечтах. Также советую посмотреть статью Wes Bos Что такое Flexbox?. Простой ускоренный курс из 20 видеороликов поможет вам овладеть flexbox бесплатно! Первые 13 видео рассказывают об основах; 7 оставшихся роликов это сплошной кодинг. Wes создает все, от меню до полных мобильных версий сайтов. И все на чистом flexbox! После этого курса вы просто не сможете не использовать flexbox в своих проектах.

Автор: Dennis Gaebel Jr

Источник: http://www.smashingmagazine.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

5 Flexbox методов, о которых вы должны знать / Хабр

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

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

1. Создание столбцов с одинаковой высотой

На первых порах, это может показаться не трудной задачей, но делать столбцы, которые имеют одинаковую высоту, иногда бывает сделать очень «геморройно». min-height в данном случае использовать будет не практично, так как с увеличением количества контента, находящегося в блоке, так же будет и увеличиваться его длина.

Flexbox не видит в этом проблемы. Все, что нам нужно, так это инициализировать гибкую модель. Обязательно убедитесь, что flex-direction и align-items имеют значения «по умолчанию».

<div>
   <div></div>
   <div></div>
   <div></div>
</div>

.container{
   display: flex;
   flex-direction: row; /*Пункты внутри контейнера будут располагаться горизонтально*/
   align-items: stretch; /*Пункты внутри контейнер будут принимать всю его высоту*/
}

Пример

2. Изменение порядка

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

Это свойство называется order. Оно позволяет мне менять любое количество flex элементов и изменять их последовательность, в которой они появятся на экране. Этот параметр представляет собой целое число, определяющее положение элемента — более низкие числа означают больший приоритет.

<div>
   <div>...</div>
   <div>...</div>
   <div>...</div>
</div>

.conteiner{
   display: flex;
}

/*Обратный порядок элементов*/

.blue{
   order: 3;
}

.red{
   order: 2;
}

.green{
   order: 1;
}

3.Горизонтальное и вертикальное центрирование

Вертикальное центрирование в CSS является одной из тех проблем, которые заставляют нас спросить себя: Как такую тривиальную вещь до сих пор так сложно сделать? И это на самом деле так. Если посмотреть в Google вертикальное центрирование CSS, то в результате поиска выскочит бесконечное количество различных методов, большинство из которых будут включать в себя таблицы и преобразования. которые предназначены для изготовления макета.

Flexbox предлагает более простое решение этой проблемы. Каждый гибкий макет имеет два направления на оси (X,Y) и два отдельных свойства для их выравнивания. Мы можем позиционировать любой элемент прямо в середине родительского контейнера.

<div>
   <div>...</div>
</div>

.container{
   display: flex;
   /*Центр по главной оси*/
   justify-content: center;
   /*Центр по вспомогательной оси*/
   align-items: center;
}

Пример

4. Создание полностью отзывчивой сетки (Responsive Grids)

Большинство разработчиков полагаются на готовые CSS фреймворки при создании адаптивных сайтов. Bootstrap является наиболее популярным, но есть и сотни других фреймворков, которые помогут вам справиться с этой задачей. Как правило, они хорошо работают и имеют множество опций, но имеют тенденцию быть довольно тяжелыми. Если вы все хотите сделать своими руками и вам не нужных громоздких фреймвокров, тогда Flexbox именно для вас!

Строка flexbox сетки представляет собой простой контейнер с display: block;. Внутри горизонтального столбца может быть любое количество элементов, размер которого устанавливается с помощью Flex. Гибкая модель адаптируется под размер окна браузера, так что эта схема должна отлично выглядеть на всех устройствах. Тем не менее, если все таки не хватит места на экране по горизонтали, то мы сможем решить эту проблему с помощью медиа-запроса.

<div>
   <!-- Эта колонка будет 25% в ширину -->
   <div>...</div>
   <!-- Эта колонка будет 50% в ширину -->
   <div>...</div>
   <!-- Эта колонка будет 25% в ширину -->
   <div>...</div>
</div>

.container{
	display: flex;
}

.col-1{
	flex: 1;
}

.col-2{
	flex: 2;
}

@media (max-width: 800px){
	.container{
		flex-direction: column;		
	}
}

5. Создание идеального Sticky Footer (прилипающий футер)

Flexbox имеет простое решение этой проблемы. Применение display: flex; к тегу body позволяет построить весь наш макет страницы, на основе свойств Flex. Да чего я все говорю, да говорю? Давайте уже лучше посмотрим на практике.

<body>
	<div>...</div>
	<!-- Наш липкий футер -->
	<footer>...</footer>
</body>

html{
    height: 100%;
}

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

.main{
   /*Основной раздел будет занимать все свободное место на странице*/
   flex: 1 0 auto;
}

footer{
   /*Футер будет занимать столько места по вертикали, сколько и должен и не пикселя больше */
   flex: 0 0 auto;
}

Вывод

Все браузеры (кроме IE 9) теперь поддерживают режим Flexbox. Если вы не использовали Flexbox до этого момента, то я рекомендуем Вам попробовать.

Надеюсь, что мои советы CSS были для вас полезны и что они помогут вам создавать более качественные и более адаптивные макеты.

Жду ваших комментариев по этому поводу.

Верстка на Flexbox – просто и понятно / WAYUP

Обучайся бесплатно с WAYUP Premiere сегодня вечером

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

Flexbox – это спецификация CSS, которая позволяет решить широкий спектр задач в вопросах верстки. С Флексбоксом можно удобно и легко распределять свободное пространство между элементами, производить выравнивание в нескольких направлениях, задавать размер объектов и много чего еще.

Это один из лучших инструментов в вопросах распределения и структуризации элементов на странице. Особенно он актуален в адаптивной верстке, когда на разных экранах расположение объектов изменяется. Флексбокс позволяет создать идеальную структуру, которая легко воспринимается и остается гибкой. Такой подход незаменим для страниц с элементами без четко указанных размеров, при необходимости создания плавающей сетки.

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

Для тех, кто еще далёк от тонкостей верстки стоит начать с увлекательного мастер-класса основателя школы WAYUP Андрея Гаврилова «Основы HTML и CSS + верстка лендинга».

Достоинства Flexbox

Идея создания прототипа Flexbox появилась еще в 2008 году, тогда CSS Working Group заинтересовалась этой возможностью и уже через год опубликовала черновик. Сразу же частичную поддержку добавили Safari и Chrome, а через несколько лет уже и Opera. В 2012 спецификация значительно улучшается, а сегодня все основные браузеры поддерживают этот модуль.

Слово “flex” использовано в названии неспроста – блоки становятся как бы резиновыми, элементы можно растягивать и сжимать, как угодно. Интересная особенность – Flexbox адаптирован под языки, в которых используется написание справа налево. Еще одной характерной чертой Flexbox является присутствие рядов в поперечном направлении. Это дает возможность выравнивать не только отдельные объекты, но и ряды.

Пример страницы, сделанной на Флексбокс:

Спецификацию Флексбокс рекомендуется использовать безоговорочно, вопрос только в тонкостях и необходимости ее применения. Наряду с этим модулем нередко используется Grid, в каких ситуациях применять эти варианты, можно посмотреть в нашем обзоре.

Основы использования

Логичная и простая верстка позволяет без усилий задавать и изменять параметры объектов внутри Flex-контейнера: распределение свободного места, выравнивание, порядок расположения и т.д.

Главная ось изменяется функцией flex-direction, имеет фиксированные размеры и границы, но позволяет изменять пути распределения блоков посредством смены осей, поперечная ось расположена перпендикулярно главной.

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

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

Свойства Флексбокса:

flex-basis – изначальный размер элемента по главной оси, может задаваться в разных единицах;
flex-grow – определяет, насколько объект может захватывать пространство и превосходить по размерам другие блоки;
flex-shrink – показатель, определяющий возможности сжимания объекта в сравнении с другими элементами страницы, базово показатель равен единице.

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

Одинаково растянуть все объекты с заполнением свободного места можно при указании параметра flex-grow:1. Можно один элемент сделать в сравнении с остальными больше, тогда нужно продумать их соотношение и применить значение функции. Например, в два раза больше будет элемент, если всем присвоить flex-grow:1, а тому, что требует увеличения – flex-grow:2. Соответственно, цифровое значение работает по принципам кратности – одинаковые структуры будут при параметрах 1:1:2 и 3:3:6. Значение не обязательно должно быть целым числом, можно достичь идеальных соотношений, играясь с дробными показателями.

Заключение

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

Если обобщить, то Flexbox является отличным решением для тех задач, которые в других системах бывают достаточно сложными или просто неудобными. К примеру, расположение нескольких блоков в ряд с равномерным распределением по всему свободному пространству, прижатие футера к низу, и т.д. Да, эти вопросы можно реализовать без Flexbox, но с ним точно получится намного удобнее, эффективнее и быстрее, если правильно применять инструменты. Научиться тонкостям верстки можно на курсе Веб-верстальщик: Код Фрилансера, где всего за три месяца интенсивного и увлекательного обучения можно получить современную востребованную профессию или повысить свою квалификацию, разобравшись в новых трендах и методах работы.

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

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

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

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

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

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

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

Список текущих проблем модуля и кросс-браузерных решений для них вы можете прочитать в статье Philip Walton Flexbugs.

Что такое 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: 8
Браузер Android: 4.4, 4.1 -webkit-
Chrome для Android: 44

1. Основные понятия

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

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

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

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

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

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

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

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

Рис. 2. Режим строки и колонки

2. Flex-контейнер

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

  .flex-container {
/ * генерирует flex-контейнер уровня блока * /
дисплей: -webkit-flex;
дисплей: гибкий;
}
.flex-container {
/ * генерирует гибкий-контейнер уровня строки * /
 дисплей: -webkit-inline-flex;
 дисплей: встроенный гибкий;
}

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

Рис. 3. Выравнивание элементов в модели flexbox

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

3. Гибкие элементы

Flex-elements — блоки, представляющие содержимое flex-контейнера в потоке. Flex-контейнер содержит новый контекст форматирования для своего содержимого, который обуславливает следующие особенности:

Для flex-элементов блокируется их значение свойства display . Значение дисплей: inline-block; и отображение: таблица-ячейка; вычисляется в дисплей: блок; .
Пустое пространство становится между элементами исчезающего: оно не становится собственным гибким элементом, даже если межэлементный текст обернут в анонимный гибкий элемент. Для содержимого анонимного flex-элемента невозможно установить собственные стили, но оно будет наследовать их (например, параметры шрифта) от flex-контейнера.
Абсолютно позиционированный flex-элемент не участвует в компоновке гибкого макета.
Поля margin соседних flex-элементов не схлопываются.
Процентные значения маржа и заполнение вычисляются от внутреннего размера содержащего их блока.
маржа: авто; расширяются, поглощая дополнительное пространство в соответствующем измерении. Их можно использовать для выравнивания или раздвигания дополнительных flex-элементов.
Автоматический минимальный размер flex-elements по умолчанию является минимальным размером его содержимого, то есть есть min-width: auto; . Для контейнеров с прокруткой автоматический минимальный размер обычно равен нулю.

4. Порядок отображения flex-элементов и ориентация

Содержимое гибких контейнеров можно разложить в любом направлении и в любом порядке (переупорядочение гибких элементов внутри контейнера влияет только на визуальный рендеринг).

4.1. Направление главной оси: flex-direction

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

изгиб
Значения:
`ряд`	Значение по умолчанию, слева направо (в rtl справа налево). Flex-элементы выкладываются в строку. Начало (main-start) и конец (main-end) направления главной оси соответствуют началу (inline-start) и концу (inline-end) оси строки (inline-axis).
`ряд-обратный`	Направление справа налево (в rtl слева направо).Гибкие элементы выкладываются в относительно правого края контейнера (в RTL — левого).
`колонка`	Направление сверху вниз. Flex-элементы выкладываются в колонку.
`колонка обратная`	Колонка с элементами в обратном порядке, снизу вверх.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`унаследовать`	Наследует значение свойств от родительского элемента.

Рис. 4. Свойство flex-direction для языков с письмом слева направо

Синтаксис

  .flex-container {
дисплей: -webkit-flex;
-webkit-flex-direction: обратный ряд;
дисплей: гибкий;
направление гибкости: обратный ряд;
}

4,2. Управление многострочностью flex-контейнера: flex-wrap

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

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

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

Рис. 5. Управление многострочностью с помощью свойств flex-wrap для LTR-языков

Синтаксис

 .flex-container {
дисплей: -webkit-flex;
-webkit-flex-wrap: обертка;
дисплей: гибкий;
flex-wrap: обертка;
}

4.3. Краткая запись направления и многострочности: flex-flow

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

гибкий поток
Значения:
направление	Указывает направление главной оси. Значение по умолчанию `ряд` .
многострочность	Задаёт многострочность поперечной оси. Значение по умолчанию `nowrap` .
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`унаследовать`	Наследует значение свойств от родительского элемента.

Синтаксис

  .flex-container {
дисплей: -webkit-flex;
-webkit-flex-flow: перенос строк;
дисплей: гибкий;
flex-flow: перенос строк;
}

4.4. Порядок отображения flex-элементов: заказать

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

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

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

Синтаксис

  .flex-container {
дисплей: -webkit-flex;
дисплей: гибкий;
}
.flex-item {
-webkit-order: 1;
заказ: 1;
}

Рис.6. Порядок отображения flex-элементов

5. Гибкость flex-элементов

Определяющим аспектом гибкого элемента является возможность «сгибать» гибкие элементы, изменяя их ширину / высоту (в зависимости от того, какой размер находится на главной оси), чтобы заполнить доступное пространство в основном измерении. Это делается с помощью свойств flex . Гибкое распределяет свободное пространство между своими дочерними элементами (пропорционально их коэффициенту гибкость-рост ) для заполнения контейнера или сжимает их (пропорционально их коэффициенту гибкость-сжатие ), чтобы предотвратить переполнение.

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

5.1. Задание гибких размеров одним своимством: flex

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

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

Синтаксис

  .flex-container {
дисплей: -webkit-flex;
дисплей: гибкий;
}
.flex-item {
-webkit-flex: 3 1 100 пикселей;
-ms-flex: 3 1 100 пикселей;
flex: 3 1 100 пикселей;
}

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

Свойство коэффициента роста одного гибкого элемента относительно других гибких элементов в гибком контейнере при распределении положительного свободного пространства. Если сумма значений flex-grow flex-elements в строке меньше 1, они занимают менее 100% свободного пространства.Свойство не наследуется.

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

Рис. 7. Управление свободным пространством в панели навигации с помощью flex-grow

Синтаксис

  .flex-container {
дисплей: -webkit-flex;
дисплей: гибкий;
}
.flex-item {
-webkit-flex-grow: 3;
flex-grow: 3;
}

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

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

гибкая термоусадочная
Значения:
число	Положительное целое или дробное число, устанавливающее коэффициент уменьшения гибкого элемента.Значение по умолчанию `1` .
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`унаследовать`	Наследует значение свойств от родительского элемента.

Рис. 8. Сужение flex-элементов в строке

Синтаксис

  .flex-container {
дисплей: -webkit-flex;
дисплей: гибкий;
}
.flex-item {
-webkit-flex-shrink: 3;
флекс-термоусадочная: 3;
}

5.4. Базовый размер: flex-base

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

гибкая основа
Значения:
`авто`	Значение по умолчанию. Элемент получает базовый размер, соответствующий размеру его содержимого (если он не задан явно).
`содержание`	Определение базового размера в зависимости от содержимого гибкого элемента.
длина	Базовый размер определяется так же, как для ширины и высоты.Задается в единицах длины.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`унаследовать`	Наследует значение свойств от родительского элемента.

Синтаксис

  .flex-container {
дисплей: -webkit-flex;
дисплей: гибкий;
}
.flex-item {
-webkit-flex-base: 100 пикселей;
гибкая основа: 100 пикселей;
}

6.Выравнивание

6.1. Выравнивание по главной оси: justify-content

Свойство выравнивает гибкие элементы по главной оси гибких элементов, распределяет свободное пространство, незанятое гибкие элементы. Когда элемент преобразуется в гибкий контейнер, гибкие элементы по умолчанию сгруппированы вместе (если для них не заданы поля , поле ). Промежутки добавляются после расчета значения маржи и гибкого роста . Если какие-либо элементы имеют ненулевое значение flex-grow или margin: auto; , свойство не будет оказывать влияние.Свойство не наследуется.

justify-content
Значения:
`гибкий старт`	Значение по умолчанию. Flex-элементы выкладываются в направлении, идущем от начальной линии flex-контейнера.
`гибкий конец`	Flex-элементы выкладываются в направлении, идущем от конечной линии flex-контейнера.
`центр`	Flex-элементы выравниваются по центру flex-контейнера.
`расстояние между`	Flex-элементы равномерно распределяются по линии. Первый гибкий элемент помещается вровень с краем начальной линии, последний гибкий элемент - вровень с краем конечной линии, остальные гибкие элементы на линии распределяются так, чтобы расстояние между любыми двумя соседними элементами было одинаковым. Если имеется свободное пространство отрицательно или в строке присутствует только один flex-элемент, оставшееся значение идентично параметру `flex-start` .
`круговое пространство`	Гибкие элементы на линии распределяются так, чтобы расстояние между любыми двумя смежными гибкими элементами было одинаковым, а расстояние между первым / последним гибкими элементами и краями гибкого контейнера составляло половину между гибкими элементами.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`унаследовать`	Наследует значение свойств от родительского элемента.

Рис. 9. Выравнивание элементов и распределение свободного пространства с помощью свойств justify-content

Синтаксис

  .flex-container {
дисплей: -webkit-flex;
-webkit-justify-content: гибкий старт;
дисплей: гибкий;
justify-content: гибкий старт;
}

6.2. Выравнивание по поперечной оси: align-items и align-self

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

6.2.1. Выравнивание предметов

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

align-items
Значения:
`гибкий старт`	край flex-элемента помещается верхнюю с гибкой рамнией (или на расстоянии, с учетом заданных полей `поля` и `границы` элемента), проходящей через начало поперечной оси.
`гибкий конец`	Нижний край flex-элемента помещается вплотную с гибкой рамнией (или на расстоянии, с учетом заданных полей `поля` и `границы` элемента), проходящей через конец поперечной оси.
`центр`	Поля flex-элемента центрируется по поперечной оси в пределах flex-линии.
`исходный`	Базовые линии всех flex-элементов, участвующих в выравнивании, совпадают.
`растяжка`	Если поперечный размер flex-элемента вычисляется как `auto` и ни одно из поперечных значений `margin` не равно `auto` , элемент растягивается.Значение по умолчанию.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`унаследовать`	Наследует значение свойств от родительского элемента.

Рис. 10. Выравнивание элементов в контейнере по вертикали

Синтаксис

  .flex-container {
дисплей: -webkit-flex;
-webkit-align-items: гибкий старт;
дисплей: гибкий;
выровнять элементы: гибкий старт;
}

6.2.2. Самовыравнивание

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

самовыравнивание
Значения:
`авто`	Значение по умолчанию. Flex-элемент использует свое выравнивание, указанное в `align-items` flex-контейнера.
`гибкий старт`	край flex-элемента помещается верхнюю с гибкой рамнией (или на расстоянии, с учетом заданных полей `поля` и `границы` элемента), проходящей через начало поперечной оси.
`гибкий конец`	Нижний край flex-элемента помещается вплотную с гибкой рамнией (или на расстоянии, с учетом заданных полей `поля` и `границы` элемента), проходящей через конец поперечной оси.
`центр`	Поля flex-элемента центрируется по поперечной оси в пределах flex-линии.
`исходный`	Flex-элемент выравнивается по этой линии.
`растяжка`	Если поперечный размер flex-элемента вычисляется как `auto` и ни одно из поперечных значений `margin` не равно `auto` , элемент растягивается. Значение по умолчанию.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`унаследовать`	Наследует значение свойств от родительского элемента.

Рис. 11. Выравнивание отдельных гибких элементов

Синтаксис

  .flex-container {
дисплей: -webkit-flex;
дисплей: гибкий;
}
.flex-item {
-webkit-align-self: center;
align-self: center;
}

6.3. Выравнивание строк flex-контейнера: align-content

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

align-content
Значения:
`гибкий старт`	Строки укладываются по направлению к началу flex-контейнера. Край первой строки вплотную к краю flex-контейнер, каждую последнюю - ограниченную к предыдущей строке.
`гибкий конец`	Строки укладываются по направлению к концу flex-контейнера.Край последней строки в последней строке предыдущую.
`центр`	Строки укладываются по направлению к центру flex-контейнера. Строки близко друг к другу и выровнены по центру гибкого контейнера с равными расстояниями между начальным краем содержимого гибкого контейнера и первой строки и между конечным краем содержимого гибкого контейнера и последней строкиой.
`расстояние между`	Строки равномерно распределены в flex-контейнере.Если есть свободное пространство отрицательно или в flex-контейнере имеется только одна оставшаяся flex-линия, это значение идентично `flex-start` . В крайнем крайнем случае крайнего положения крайнего крайнего положения гибкого контейнера, крайнего крайнего положения - крайнего крайнего краю гибкого контейнера. Остальные строки распределены так, чтобы расстояние между любыми двумя соседними строками было одинаковым.
`круговое пространство`	Строки равномерно распределены в flex-контейнерах с половинным пробелом на обоих концах.Если оставшееся пространство цент отрицательно, это значение оставлено идентично `center` . В случае оценки конечных строк, расстояние между двумя соседними строками было одинаковым, расстояние между первой / последней строкой и краями гибкого контейнера составляло половину от расстояния между строками.
`растяжка`	Значение по умолчанию. Строки гибких элементов равномерно растягиваются, заполняются все доступное пространство.Если оставшееся свободное пространство отрицательно, это значение оставлено идентично `flex-start` . В противном случае свободное пространство будет разделено поровну между всеми строками, увеличивая их поперечный размер.
`начальный`	Устанавливает значение свойства в значение по умолчанию.
`унаследовать`	Наследует значение свойств от родительского элемента.

Рис. 12. Многострочное выравнивание flex-элементов

Синтаксис

 .flex-container {
дисплей: -webkit-flex;
-webkit-flex-flow: перенос строк;
-webkit-align-content: гибкий конец;
дисплей: гибкий;
flex-flow: перенос строк;
выровнять контент: гибкий конец;
высота: 100 пикселей;
}

По материалам CSS Flexible Box Layout Module Level 1

FlexboxLayout - часть 1 / Блог компании speakASAP / Хабр

В мае 2016 года в официальных репозиториях Google на Github появился новый проект - flexbox-layout. Это менеджер макетов под Андроид, который предоставляет функциональность, схожую с CSS Flexible Box. В этой серии статей мы посмотрим на FlexboxLayout и попытаемся понять, как он работает, и как его лучше использовать.

Мы рассмотрим влияние XML-атрибутов на макет и поведение вложенных представлений.Чтобы было проще разбираться, я опубликовал приложение в Google Play, которое позволяет поэкспериментировать различные варианты. Со временем я выложу исходный код этого приложения, а пока предлагаю скачать его и поиграться с настройками.

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

Для начала добавляем зависимость в файл build.gradle:

  зависимостей {
    скомпилировать 'com.google.android:flexbox:0.1.2'
}

И теперь можно просто использовать FlexboxLayout в XML (ну или в коде, если надо). Не буду останавливаться на этом подробнее, примеров в репозитории более чем достаточно.

В общих чертах, FlexboxLayout ближе всего к LinearLayout : дочерние элементы располагаются последовательно, один за другими.При использовании LinearLayout мы задаем ориентацию, и это подводит нас к первому атрибуту FlexboxLayout , который мы сейчас рассмотрим:

flexDirection

Этот атрибут контролирует направление расположения дочерних элементов, и, как уже говорилось, работает схоже с атрибутом ориентация для LinearLayout . Значения ряд и столбец аналогны горизонтальной и вертикальной ориентации. Здесь здесь есть еще 2 возможных значения: row_reverse и column_reverse - они делают то же самое, только первые дочерние элементы в обратном порядке.

flexDirection = "row"

flexDirection = "row_reverse"

Здесь нужно остановиться и правильно пару терминов: главная ось (главная ось) - это направление макета, заданное в атрибуте flexDirection ; и перпендикулярная к этому направлению поперечная ось (поперечная ось). Для row и row_reverse главная будет горизонтальная ось, а поперечной - вертикальная. Запомните эти определения, они нам еще понадобятся.

flexWrap

Первое важное различие между FlexboxLayout и LinearLayout - поведение, когда дочерние элементы достигают границы контейнера (т.е. не влезают в контейнер). В случае использования LinearLayout дочерние элементы просто обрезаются, так что при достижении границы они будут за пределами контейнера. Используя FlexboxLayout , мы можем контролировать это поведение с помощью атрибута flexWrap .Установив его в значение nowrap , мы заставляем все предыдущие элементы сжиматься, чтобы освободить место для нового элемента. Здесь есть возможность более тонкой настройки, мы рассмотрим это в дальнейших статьях, когда будем разбирать атрибуты дочерних элементов.

flexWrap = "nowrap"

flexWrap = "wrap"

flexWrap = "wrap_reverse"

justifyContent

Способ позиционирования элементов вдоль главной оси контролируется атрибутом justify.На первый взгляд поведение этого атрибута может показаться похожим на поведение атрибута flexDirection , однако flexDirection контролирует порядок элементов, в то время как justifyContent - относительное местоположение. Возможные значения: flex_start , flex_end , center , space_between and space_around .

justifyContent = "flex_start"

justifyContent = "flex_end"

justifyContent = "center"

justifyContent = "space_between"

justifyContent = "space_between"

alignItems
Контролирует положение и размер элементов по поперечной оси.Возможные значения: stretch , flex_start , flex_end , center и baseline .

alignItems = "flex_start"

alignItems = "flex_end"

alignItems = "center"

alignItems = "baseline"
tem s = "baseline"
tem

alignContent
Вот здесь можно слегка запутаться. alignContent очень похожим на alignItems , но есть одно небольшое различие, которое, тем не менее, сильно влияет на поведение.Если alignItems контролирует, как располагаются элементы вдоль своей оси, то alignContent управляет самим размещением оси. В терминах Андроида это можно сравнить с TableRow и TableLayout : alignContent ведет себя как применение атрибутов к TableRow , а alignItems - это применение атрибутов к дочерним элементам - другим ячейкам таблицы. Возможные значения: stretch , flex_start , flex_end , center , space_between и space_around .

alignContent = "flex_start"

alignContent = "flex_end"

alignContent = "center"

alignContent = "space_between"

alignContent = "stretch"
Лучший способ понять разницу между alignItems и alignContent - это поиграться с ними. В моем приложении установлены параметры flexDirection : Row , Flex wrap : Wrap , добавить несколько ячеек (с помощью кнопки «Добавить»), чтобы занять 2 ряда, установить alignContent в stretch , чтобы Проще было оценить размеры элементов, а затем поиграйтесь значениями alignItems .
Вот такая довольно мощная и гибкая штука. В следующей статье мы рассмотрим способы управления дочерними элементами по отдельным элементам.
Приложение доступно в Google Play, исходный код будет опубликован по завершении серии статей.
.
Flexbox - Изучение веб-разработки | MDN
Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предлагает инструменты для быстрого создания сложных, гибких макетов, и функции, которые были просты в методах CSS. В этой статье объясняются все основы данной технологии.
Необходимые навыки: основы HTML (изучите Введение в HTML), знание того, как работает CSS (изучите Вступление в CSS).
Цель: Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов.
Почему Flexbox?
Долгое время единственными надёжными инструментами CSS-верстки были такие способы как Float (обтекание) и позиционирование.
С помощью сложных или достижимых следующих простых требований к макету:
Вертикального выравнивания блока внутри родителя.
Доступно
Оформления всех детей контейнера, чтобы они распределили между собой доступную ширину / высоту независимо от того, сколько ширины / высоты доступно.
Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.
Как вы увидите в разделах, Flexbox облегчает работу с макетами. Погружаемся!
Разберём простой пример
В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox.Чтобы начать, скачайте компьютер стартовый файл - flexbox0.html с нашего репозитория Github - загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете посмотреть его вживую.
Вы видите элемент <заголовок> с заголовком верхнего уровня внутри и элемент <раздел> обеспечива три элемента <статья> . Мы будем использовать их для создания стандартного трехколоночного макета.
Определяем, какие элементы link в виде flex блоков
Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков.Для этого мы устанавливаем специальное значение display в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы
, поэтому мы устанавливаем это значение на
(который становится гибким контейнером):
section { дисплей: гибкий; }
В результате у нас получится вот так:
Так, всего одно объявление делает всё, что нам нужно - здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте.Это связано с тем, что значения по умолчанию, заданные для гибких элементов (дочерние элементы гибких контейнеров), настроены для решения основных задач. Подробнее об этом позже.
Примечание : Вы также можете установить значение display inline-flex, если хотите расставить inline элементы как flex блоки.
Внутри flex модели
Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:
Главная ось (главная ось) направлена в том направлении, вдоль которого расположены элементы Flex (например, в строке слева или проходит вдоль колонок вниз.) Начало и конец этой оси называются main start и main end .
Поперечная ось (поперечная ось) проходит перпендикулярно Flex элементам. Начало и конец этой оси называются поперечным началом и поперечным концом .
Родительский элемент, на который назначено свойство display: flex (
в нашем примере) называется flex container .
Элементы, размещенные в нём как Flex блоки называются flex items (в нашем примере это
).
Запомните эти термины, они пригодятся вам в разделах.
Столбцы или строки?
В Flexbox есть свойство под названием flex-direction , которое определяет направление главной оси (в каком направлении располагаются дочерние элементы flexbox) - по умолчанию ему присваивается значение row , т.е. располагать дочерние элементы в ряд слева направо (для арабских языков) или справа налево (для арабских языков).
Добавьте дополнительную строчку в ваш файл:
flex-direction: столбец
Вы, видите, что расположились в виде столбцов, также как было добавлено CSS-код.Прежде чем продолжать, удалите эту строчку из примера.
Примечание : Вы также можете распологать гибкие элементы в обратном направлении, используя значения обратный ряд и обратный столбец . Попробуйте их тоже!
Перенос строк
Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши элементы flexbox переполнят контейнер и нарушат макет. Посмотрите на этот пример: flexbox-wrap0.html и посмотрите его вживую (сохраните его на компьютер, если хотите изучить этот пример):
Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера.Один из способов как это исправить - это добавить следующее свойство:
гибкая пленка: пленка
Попробуйте, и вы увидите, что так макет стал намного лучше:
Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство flex: 200px , установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже.Вы также можете заметить, что несколько дочерних блоков в строке стали более широкими, так что вся строка стала заполнена.
Мы можем пойти дальше. Прежде всего, изменить значение свойства flex-direction на row-reverse - теперь у вас также макет в несколько строк, но он начинается из противоположного угла окна и теперь выстраивается в обратном порядке.
гибкое сокращение
На этом этапе требуется сокращение для свойства flex-direction и flex-wrap - flex-flow .Например, вы можете заменить
flex-direction: ряд; flex-wrap: обертка;
на
flex-flow: обертывание строк;
Гибкое изменение размеров гибких элементов
Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях элементы гибкости будут занимать место. Включите свою копию файла flexbox0.html, или скачайте flexbox1.html (просмотр).
Прежде всего, добавим следующее правило в конец вашего кода CSS:
статья { гибкость: 1; }
Это безразмерное значение пропорции указывает, сколько свободного пространства на главной оси (главная ось) каждый гибкий элемент захвата занимает.В этом случае мы даём каждому элементу
значение 1, а это значит, что они будут занимать равное количество свободного места в макете, которое осталось после установки свойств, заполнение и поля.
Теперь добавьте следующее правило в строку после предыдущего:
артикул: nth-of-type (3) { гибкость: 2; }
Обновить страницу, отображаются, что третий элемент
занимает в два раза больше доступной ширины, чем два других - итого теперь доступно 4 единицы пропорции.Первые два гибких элемента имеют по одной единице, поэтому берут 1/4 пространства каждый. А у третьего 2 единицы, так что он берёт 2/4 свободного места (или 1/2).
Вы также можете указать минимальный размер внутри значения flex. Попробуйте исправить положение, добавив размеры:
статья { flex: 1 200 пикселей; } article: nth-of-type (3) { flex: 2 200 пикселей; }
Это просто означает, что каждому гибкому элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций.Обновите страницу, и вы увидите разницу, как пространство поделено теперь.
Настоящая ценность flexbox можно увидеть в его гибкости / отзывчивости - если изменить размер окна или добавить ещё элемент
, макет будет и дальше выглядеть также хорошо.
flex: краткий код против развёрнутого
flex это сокращённое свойство, которым можно задать до трёх разных свойств:
Значение пропорции, которое мы обсуждали выше.Оно может быть установлено отдельно с помощью свойств flex-grow .
Следующее значение пропорции - flex-shrink - вступает в роль, когда гибкие элементы переполняют контейнер. Оно указывает, сколько забирается от размера каждого гибкого элемента, чтобы он перестал переполнять контейнер. Это продвинутая функция flexbox, и в этом параграфе мы не будем её разбирать.
Значение минимального размера, как мы обсуждали ранее. Оно может быть установлено отдельно с помощью свойств flex-base .
Мы не советуем использовать развнутые свойства flex, если вам в действительности это не нужно (например, переопределить ранее установленное). Они приводят к написанию большого количества дополнительного кода и могут запутать кого угодно.
Горизонтальное и вертикальное выравнивание
Flexbox также имеет функции для выравнивания гибких элементов вдоль основной (основной) или поперечной (поперечной) осей. Рассмотрим их на новом примере - просмотр flex-align0.html (просмотр) - который мы превратим в аккуратную, гибкую кнопочную панель инструментов.На данный момент вы видите кнопку горизонтальной панели, которая застряла в верхнем левом углу.
Сначала сделайте себе копию этого примера.
Теперь введите строку в низком коде CSS:
div { дисплей: гибкий; align-items: center; justify-content: пространство вокруг; }
Обновите страницу, и вы увидите, что кнопки теперь хорошо центрированы, горизонтально и вертикально. Мы сделали это с помощью двух новых свойств.
align-items контролирует, где на поперечной оси находятся гибкие элементы.
По умолчанию стоит значение растягивает , которое растягивает все гибкие элементы, чтобы заполнить родителя вдоль поперечной (поперечной оси) оси. Если у родителя нет фиксированной ширины вдоль поперечной оси, все элементы гибкости примут длины самого длинного элемента. Вот почему наш первый пример по умолчанию получил столбцы с одинаковой высотой.
Значение center , которое мы использовали в коде вверху, они заставляют элементы укреплять свои собственные размеры, но центрирует их вдоль поперечной оси.Вот почему кнопки пример центрированы по вертикали.
Также есть значения flex-start и flex-end , которые выравнивают все элементы по началу и концу поперечной оси соответственно. См. подробнее align-items .
Вы можете переопределить align-items поведение для отдельных гибких элементов, применив align-self к ним. Например, попробуйте добавить эти строки в код:
button: first-child { align-self: гибкий конец; }
Посмотрите, что произошло и удалите эти строки.
justify-content контролирует, где элементы гибкости располагаются на главной оси.
По умолчанию стоит значение flex-start , которое располагает все элементы в начале главной оси.
Также можно использовать flex-end, чтобы расположить их в конце.
центр - также одно из значений justify-content , располагает все элементы по центру главной оси.
, которое мы использовали выше, пространство вокруг , весьма широко - оно распределяет все элементы равномерно по главной оси, с небольшим свободным местом на обоих концах.
И ещё одно значение, пространство между , которое очень похоже на пространство вокруг, за исключением того, что оно не оставляет места на обоих концах.
Попробуйте немного поиграть с этими значениями прежде чем продолжить
Порядок элементов flex
В Flexbox также есть возможность менять порядок расположения гибких элементов, не влияющие на исходный порядок. Это ещё одна вещь, которую невозможно сделать традиционными методами CSS.
Код здесь простой: Отправить следующий CSS на ваш пример:
button: first-child { заказ: 1; }
и теперь вы увидите, что кнопка «Smile» переместилась в конец главной оси. Давайте теперь поговорим подробнее о том, как это работает:
По умолчанию все элементы гибкости порядок имеют равное 0.
Элементы Flex с установленными на бОльшими значениями будут них позже в порядке отображения, чем элементы с меньшими значениями порядка.
Элементы Flex с одинаковым значением порядка будут указаны в исходном порядке. Так, если у вас есть четыре элемента с порядковыми значениями 2, 1, 1 и 0, установленными на них соответственно, их порядок отображения будет 4-й, 2-й, 3-й, 1-й.
Третий появляется после второго, потому что он имеет то же порядок порядка и находится после него в порядке написания.
Вы можете установить отрицательные значения, чтобы элементы отображались раньше, чем элементы с установленным 0.Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:
button: last-child { заказ: -1; }
Вложенные flex блоки
Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать гибкий элемент, гибкий контейнер, чтобы его потомки также были гибкими блоками. Посмотрите на complex-flexbox.html (см. Вживую).
HTML для этого довольно простой. У нас есть элемент <раздел> , действие три <статья> .Третий
содержит ещё три
.
раздел - статья статья статья - div - кнопка кнопка div кнопка div кнопка кнопка
Давайте посмотрим на код, который мы использовали для макета.
Прежде всего, мы устанавливаем дочерние элементы
в виде flex блоков.
section { дисплей: гибкий; }
Затем мы устанавливаем несколько значений на себе <статья> .Обратите внимание на второе правило: мы устанавливаем третий
, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.
статья { flex: 1 200 пикселей; } article: nth-of-type (3) { flex: 3 200 пикселей; дисплей: гибкий; flex-flow: колонка; }
Затем мы берём первый
. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, мы установили его дочерние элементы (элементы

Навигация по записям
Пред.
След.
Разное
Как часто можно делать клизму грудничку: рекомендации педиатров
alexxlab
22.11.2024
0
Разное
Почему новорожденный не спит ночью: 11 главных причин и способы решения проблемы
alexxlab
19.11.2024
0
Разное
Как успокоить плачущего ребенка: 10 эффективных способов
alexxlab
16.11.2024
0
Разное
Что нужно новорожденному на первое время: полный список необходимых вещей
alexxlab
14.11.2024
0
Разное
Пеленки для новорожденных: виды, размеры и способы использования
alexxlab
13.11.2024
0
Разное
Детская кроватка для новорожденного: как правильно выбрать
alexxlab
10.11.2024
0
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя *
Email *
Сайт

Необходимые навыки:	основы HTML (изучите Введение в HTML), знание того, как работает CSS (изучите Вступление в CSS).
Цель:	Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов.