Flex wrap

Введение

Модуль разметки Flexbox (от английского Flexible Box – гибкий блок), находящийся на данный момент на этапе «Возможная рекомендация» стандартизации W3C (W3C Candidate Recommendation) нацелен на обеспечение более эффективного способа разметки, выравнивания и распределения места между элементами в контейнере, даже если их размер неизвестен и/или определяется динамически (вот почему его назвали «гибкий»).


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

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

Что наиболее важно, разметка Flexbox не зависит от направления, в противоположность обычным разметкам (блокам, которые ориентированы вертикально и строчным элементам, располагающимся горизонтально).

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

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

Основные понятия и термины

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

Если обычная разметка основывается на направлениях блоков и строчных элементов, то flex-разметка базируется на направлениях flex-потока. Пожалуйста, обратите внимание на приведенную ниже схему из спецификации, объясняющую основную идею, стоящую за flex-разметкой:

В основном, элементы будут размещены либо вдоль главной оси (от точки main-start до main-end), либо вдоль поперечной оси (от точки cross-start до cross-end):


  • main axis – это главная ось flex-контейнера, вдоль которой размещаются flex-элементы. Будьте осторожны, она не обязательно располагается горизонтально, ее положение зависит от свойства flex-direction (смотрите ниже);
  • main-start | main-end — flex-элементы располагаются внутри контейнера, начиная от точки main-start, и доходят до точки main-end;
  • main size – это ширина или высота flex-элемента, в зависимости от основной величины. В качестве значения свойства main size может быть установлено значение ширины или высоты;
  • cross axis – поперечная ось, перпендикулярная главной оси. Ее направление зависит от направления главной оси.
  • cross-start | cross-end – flex-строки заполняются элементами и размещаются в контейнере, начиная со стороны cross-start по направлению к стороне cross-end;
  • cross size – ширина или высота flex-элемента, в зависимости от выбранной размерности. Свойство может иметь значение либо ширины, либо высоты поперечной размерности.

Свойства родительского класса (flex-контейнера)

display

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


Отметим, что CSS-столбцы (columns) не имеют эффекта во flex-контейнере.

flex-direction

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

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

  • row (по умолчанию): слева направо для ltr; справа налево для rtl;
  • row-reverse: справа налево для in ltr; слева направо для rtl;
  • column: так же как row, но сверху вниз;
  • column-reverse: так же как row-reverse, но снизу вверх.

flex-wrap

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

  • nowrap (по умолчанию): однострочный / слева направо для ltr; справа налево для rtl;
  • wrap: многострочный / слева направо для ltr; справа налево для rtl;
  • wrap-reverse: многострочный / справа налево для ltr; слева направо для rtl.

flex-flow (применяется к родительскому элементу flex-контейнера)

Это сокращенная форма свойств flex-direction и flex-wrap, которые вместе определяют главную и поперечную оси flex-контейнера. По умолчанию задается значение row nowrap:

justify-content

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

  • flex-start (по умолчанию): элементы выравниваются к началу строки;
  • flex-end: элементы выравниваются к концу строки;
  • center: элементы выравниваются по центру строки;
  • space-between: элементы распределяются в строке равномерно: первый элемент располагается в начале строки, последний – в конце;
  • space-around: элементы распределяются в строке равномерно с одинаковым расстоянием между собой.

align-items

Это свойство определяет то, как по умолчанию располагаются flex-элементы относительно поперечной оси на текущей строке. Его можно считать версией justify-content для поперечной оси (перпендикулярной главной):

  • flex-start: граница элементов cross-start располагается на линии cross-start;
  • flex-end: граница элементов cross-start располагается на линии cross-end;
  • center: элементы располагаются по центру поперечной оси;
  • baseline: выравнивание элементов происходит согласно базовой линии;
  • stretch (по умолчанию): элементы растягиваются для того, чтобы заполнить контейнер (с учетом значений min-width/max-width).

align-content

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

Примечание: это свойство не будет работать, если есть только одна строка flex-элементов:

  • flex-start: строки располагаются в начале контейнера;
  • flex-end: строки располагаются в конце контейнера;
  • center: строки располагаются посередине контейнера;
  • space-between: строки распределяются равномерно; первая строка – в начале контейнера, а последняя – в конце;
  • space-around: строки размещены равномерно на одинаковом расстоянии друг от друга;
  • stretch (по умолчанию): строки растягиваются, чтобы заполнить оставшееся пространство.

Свойства дочерних элементов

(flex-элементы)

Order

По умолчанию, flex-элементы располагаются в порядке, заданном источником. Однако свойство order контролирует порядок, в котором элементы появляются во flex-контейнере:

flex-grow

Это свойство позволяет flex-элементу «разрастаться» в случае необходимости. Оно принимает безразмерное значение, служащее в качестве пропорции. Это значение определяет, какой объем доступного пространства внутри flex-контейнера может занять элемент.


Если для всех элементов свойство flex-grow установлено в 1, то для каждого дочернего элемента будет задан одинаковый размер внутри контейнера. Если вы установите для одного из дочерних элементов значение 2, то он займет в два раза больше места, чем другие:

Отрицательные числа недопустимы.

flex-shrink

Это свойство определяет для flex-элементов возможность сжиматься в случае необходимости:

Отрицательные числа недопустимы.

flex-basis

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

flex

Это свойство является сокращенной формой для комбинации свойств flex-grow, flex-shrink и flex-basis. Второй и третий параметры (flex-shrink и flex-basis) задаются опционально. Значения по умолчанию: 0 1 auto:

align-self

Это свойство позволяет переопределить выравнивание, заданное по умолчанию (или определенное свойством align-items) для отдельных flex-элементов.

Доступные значения вы можете найти в описании свойства align-items:

Обратите внимание, что float, clear и vertical-align не работают с flex-элементами.

Примеры

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


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

Теперь давайте воспользуемся еще несколькими свойствами. Предположим, что у нас есть список из 6 элементов, все они фиксированного размера (для эстетичности), но с возможностью автоматического заполнения.

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

Готово! Все остальное — уже вопросы оформления. Здесь располагается демонстрация этого примера. Перейдите по ссылке и попробуйте изменить размер окна, чтобы посмотреть, что произойдет:

HTML:

CSS:

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

CSS:

HTML:

CSS:

Давайте попробуем сделать еще лучше, поиграв с «гибкостью» flex-элементов. Как насчет мобильной разметки в три столбца с заголовком и подвалом во всю ширину? И с выводом элементов, независимым от порядка, заданного исходным кодом:


CSS:

HTML:

CSS:

Использование префиксов для flexbox

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

А все потому, что спецификация flexbox менялась с течением времени, создав «old» (старую), «tweener«(промежуточную), и «new» (новую) версии.

Возможно, наилучший выход в этой ситуации — это писать код, используя новый (и финальный) синтаксис и пропускать CSS через Autoprefixer, который очень хорошо обрабатывает откаты к предыдущим версиям.

В качестве альтернативы, ниже приведен Sass метод @mixin для помощи с некоторыми префиксами, который к тому же раскрывает идею того, какие действия должны быть предприняты:

SCSS:

www.internet-technologies.ru

Начинаем погружение

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

HTML

<div class="my-flex-container">  <div class="my-flex-block">item1</div>  <div class="my-flex-block">item2</div>  <div class="my-flex-block">item3</div> </div> 

CSS

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

Основные свойства flex-контейнера. Главная и поперечная ось.

Одним из основных понятий в fleхbox являются оси.


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

Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз. Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction.

flex-direction – направление главной оси

flexbox-main-columnflexbox-main-row

Доступные значения flex-direction:

  • row (значение по умолчанию) : слева направо (в rtl справа налево)
  • row-reverse: справа налево (в rtl слева направо)
  • column: сверху вниз
  • column-reverse: снизу вверх

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

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

Доступные значения justify-content:

  • flex-start (значение по умолчанию) : блоки прижаты к началу главной оси
  • flex-end: блоки прижаты к концу главной оси
  • center: блоки располагаются в центре главной оси
  • space-between: первый блок располагается в начале главной оси, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве.
  • space-around: все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну.

flex-justify-content

align-items – выравнивание по поперечной оси.

Css свойство align-items определяет то, как будут выровнены элементы вдоль поперечной оси.

Доступные значения align-items:

  • flex-start: блоки прижаты к началу поперечной оси
  • flex-end: блоки прижаты к концу поперечной оси
  • center: блоки располагаются в центре поперечной оси
  • baseline: блоки выровнены по их baseline
  • stretch (значение по умолчанию) : блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width/max-width, если таковые заданы.

flex-align-items

СSS свойства flex-direction, justify-content, align-items должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Демо основных свойств flex-контейнера

Оси и выравнивания по ним – это основы flex. Расслабьтесь, покликайте по демке и используйте ее, если нужно будет освежить в памяти.

flexbox demo

Многострочная организация блоков внутри flex-контейнера.

flex-wrap

Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. Надо сказать, что по умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap.

Доступные значения flex-wrap:

  • nowrap (значение по умолчанию) : блоки расположены в одну линию слева направо (в rtl справа налево)
  • wrap: блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево)
  • wrap-reverse: то-же что и wrap, но блоки располагаются в обратном порядке.

flex-flow – удобное сокращение для flex-direction + flex-wrap

По сути,flex-flow предоставляет возможность в одном свойстве описать направление главной и многострочность поперечной оси. По умолчанию flex-flow: row nowrap.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

CSS

/* т.е. ... */  .my-flex-block{  flex-direcrion:column;  flex-wrap: wrap; }  /* это то же самое, что ... */  .my-flex-block{  flex-flow: column wrap; } 

align-content

Существует также свойство align-content, которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.

Важно: align-content работает только в многострочном режиме (т.е. в случае flex-wrap:wrap; или flex-wrap:wrap-reverse;)

Доступные значения align-content:

  • flex-start: ряды блоков прижаты к началу flex-контейнера.
  • flex-end: ряды блоков прижаты к концу flex-контейнера
  • center: ряды блоков находятся в центре flex-контейнера
  • space-between: первый ряд блоков располагается в начале flex-контейнера, последний ряд блоков блок – в конце, все остальные ряды равномерно распределены в оставшемся пространстве.
  • space-around: ряды блоков равномерно распределены в от начала до конца flex-контейнера, разделяя все свободное пространство поровну.
  • stretch (значение по умолчанию): Ряды блоков растянуты, дабы занять все имеющееся пространство.

flex-align-content

СSS свойства flex-wrap и align-content должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.

Демо свойств многострочности в flex

flexbox demo

CSS правила для дочерних элементов flex-контейнера (flex-блоков)

flex-basis – базовый размер отдельно взятого flex-блока

Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны (px, em, %, …) или auto(по умолчанию). Если задан как auto – за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.

flex-grow – “жадность” отдельно взятого flex-блока

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

Пример 1:

  • Если все flex-блоки внутри flex-контейнера имеют flex-grow:1, то они будут одинакового размера
  • Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные

Пример 2:

  • Если все flex-блоки внутри flex-контейнера имеют flex-grow:3, то они будут одинакового размера
  • Если один из них имеет flex-grow:12, то он будет в 4 раза больше, чем все остальные

Т.е абсолютное значение flex-grow не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.

flex-shrink – фактор “сжимаемости” отдельно взятого flex-блока

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

flex – короткая запись для свойств flex-grow, flex-shrink и flex-basis

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

CSS

/* т.е. ... */  .my-flex-block{  flex-grow:12;  flex-shrink:3;  flex basis: 30em; }  /* это то же самое, что ... */  .my-flex-block{  flex: 12 3 30em; } 

Демо для flex-grow, flex-shrink и flex-basis

flexbox demo

align-self – выравнивание отдельно взятого flex-блока по поперечной оси.

Делает возможным переопределять свойство flex-контейнера align-items для отдельного flex-блока.

Доступные значения align-self (те же 5 вариантов, что и для align-items)

  • flex-start: flex-блок прижат к началу поперечной оси
  • flex-end: flex-блок прижат к концу поперечной оси
  • center: flex-блок располагаются в центре поперечной оси
  • baseline: flex-блок выравнен по baseline
  • stretch (значение по умолчанию) : flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываются min-width/max-width, если таковые заданы.

order – порядок следования отдельно взятого flex-блока внутри flex-контейнера.

По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Однако этот порядок можно изменить с помощью свойства order. Оно задается целым числом и по умолчанию равно 0.

Значение order не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.

HTML

<div class="my-flex-container">  <div class="my-flex-block" style="order: 5" >item1</div>  <div class="my-flex-block" style="order: 10">item2</div>  <div class="my-flex-block" style="order: 5" >item3</div>  <div class="my-flex-block" style="order: 5" >item4</div>  <div class="my-flex-block" style="order: 0" >item5</div> </div> 

В данном случае, блоки будут следовать один за другим вдоль главной оси в следующем порядке: item5, item1, item3, item4, item2

Демо для align-self и order

flexbox demo

margin: auto по вертикали. Мечты сбываются!

Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto здесь работает и для вертикали!

.my-flex-container {  display: flex;  height: 300px; /* Или что угодно */ }  .my-flex-block {  width: 100px; /* Или что угодно */  height: 100px; /* Или что угодно */  margin: auto; /* Магия! Блок отцентрирован по вертикали и горизонтали! */ } 

Вещи, которые следует помнить

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

В заключение

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

html5.by

Что такое flexbox

  • Содержание:
  • 1. Основные понятия
  • 2. Flex-контейнер
  • 3. Flex-элементы
  • 4. Порядок отображения flex-элементов и ориентация
  • 4.1. Направление главной оси: flex-direction
  • 4.2. Управление многострочностью flex-контейнера: flex-wrap
  • 4.3. Краткая запись направления и многострочности: flex-flow
  • 4.4. Порядок отображения flex-элементов: order
  • 5. Гибкость flex-элементов
  • 5.1. Задание гибких размеров одним свойством: flex
  • 5.2. Коэффициент роста: flex-grow
  • 5.3. Коэффициент сжатия: flex-shrink
  • 5.4. Базовый размер: flex-basis
  • 6. Выравнивание
  • 6.1. Выравнивание по главной оси: justify-content
  • 6.2. Выравнивание по поперечной оси: align-items и align-self
  • 6.3. Выравнивание строк flex-контейнера: align-content

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

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. Основные понятия

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

Flex wrap
Рис. 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-элементом, выстраиваясь в один ряд (вдоль главной оси). При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.

display-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 Наследует значение свойства от родительского элемента.
Flex wrap
Рис. 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 Наследует значение свойства от родительского элемента.
flex-wrap
Рис. 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;  }
order
Рис. 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 Наследует значение свойства от родительского элемента.
Flex wrap
Рис. 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 Наследует значение свойства от родительского элемента.
flex-shrink
Рис. 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 Наследует значение свойства от родительского элемента.
justify-content
Рис. 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 Наследует значение свойства от родительского элемента.
align-items
Рис. 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 Наследует значение свойства от родительского элемента.
align-self
Рис. 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 Наследует значение свойства от родительского элемента.
align-content
Рис. 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

html5book.ru

Свойства flex-контейнера

flex-direction Определяет направление главной оси. Возможные значения:

  • row – слева направо (по умолчанию);
  • row-reverse – справа налево;
  • column – сверху вниз;
  • column-reverse – снизу вверх.
flex-wrap Определяет многострочность контейнера. Возможные значения:

  • nowrap – flex-элементы выстраиваются в одну строку, если не помещаются в контейнер, то выходят за его границы (по умолчанию);
  • wrap – flex-элементы выстраиваются в несколько строк, если не помещаются в одну;
  • wrap-reverse – похоже на wrap, но перенос происходит снизу вверх.
flex-flow Определяет сразу два параметра: flex-direction и flex-wrap.
Например, flex-flow: column wrap; justify-content Определяет выравнивание элементов по главной оси. Возможные значения:

  • flex-start – flex-элементы прижимаются к началу главной оси (по умолчанию);
  • flex-end – flex-элементы прижимаются к концу главной оси;
  • center – flex-элементы выравниваются по центру главной оси;
  • space-between – flex-элементы распределяются вдоль главной оси, при этом первый элемент прижат к началу оси, а последний — к концу;
  • space-around – flex-элементы распределяются вдоль главной оси, при этом свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются и расстояние между элементами в два раза больше, чем расстояние между краями контейнера и крайними элементами.

Пример

align-items Определяет выравнивание элементов по поперечной оси. Возможные значения:

  • flex-start – flex-элементы прижимаются к началу поперечной оси (по умолчанию);
  • flex-end – flex-элементы прижимаются к концу поперечной оси;
  • center – flex-элементы выравниваются по центру поперечной оси;
  • baseline – flex-элементы выравниваются по своей базовой линии. Базовая линия – это воображаемая линия, проходящая по нижнему краю символов без учёта свисаний, таких как у букв «д», «р», «ц», «щ»;
  • stretch – flex-элементы растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.
align-content Определяет выравнивание целых строк flex-элементов по поперечной оси. Возможные значения:

  • flex-start – строки flex-элементов прижимаются к началу поперечной оси (по умолчанию);
  • flex-end – строки flex-элементов прижимаются к концу поперечной оси;
  • center – fстроки flex-элементов выравниваются по центру поперечной оси;
  • space-between – строки flex-элементов распределяются вдоль поперечной оси, при этом первая строка прижата к началу оси, а последняя — к концу;
  • space-around – строки flex-элементов распределяются вдоль поперечной оси, при этом свободное пространство делится поровну между строками. Но стоит отметить, что промежутки суммируются и расстояние между строками в два раза больше, чем расстояние между краями контейнера и крайними строками.
  • stretch – строки flex-элементов растягиваются, занимая все доступное место по поперечной оси. Но если для элементов задана высота, то stretch будет проигнорирован.

Пример

Это свойство не работает для однострочного flex-контейнера.

Свойства flex-элементов

order Определяет порядок следования отдельно взятого flex-элемента внутри flex-контейнера. Задается целым числом. По умолчанию равно 0, тогда элементы следуют друг за другом в порядке естественного потока. Значение order задает вес позиции элемента в последовательности, а не абсолютную позицию.

Пример

flex-basis Определяет базовый размер flex-элемента перед распределением пространства в контейнере. Может быть задан в px, %, em и остальных единицах измерения. По сути это своего рода отправная точка, относительно которой происходит растягивание или сжатие элемента. Значение по умолчанию – auto, при этом размер элемента зависит от размера внутреннего контента.

В спецификации CSS Flexible Box Layout Module Level 1 приведена наглядная диаграмма для трех flex-элементов со значениями flex-grow 1, 1, 2 соответственно:

Свойство flex-basis

Пример flex-basis: 0

Пример flex-basis: auto

flex-grow Определяет, какую долю свободного места внутри контейнера добавит к своему базовому размеру flex-элемент. Задается целым числом, служащим пропорцией. По умолчанию равно 0. Если у всех элементов flex-grow: 1, то все они будут одинакового размера. Если одному flex-элементу задать значение 2, то к его базовому размеру добавится в два раза больше, чем к другим.

Пример

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

Пример

flex Определяет сразу три параметра: flex-grow, flex-shrink, flex-basis.
Например, flex: 1 1 200px;
align-self Переопределяет выравнивание, заданное по умолчанию или в align-items, для конкретного flex-элемента. Возможные значения:

  • flex-start – flex-элемент прижимается к началу поперечной оси (по умолчанию);
  • flex-end – flex-элемент прижимается к концу поперечной оси;
  • center – flex-элемент выравнивается по центру поперечной оси;
  • baseline – flex-элемент выравнивается по базовой линии;
  • stretch – flex-элементы растягивается, занимая все доступное место по поперечной оси. Но если задана высота, то stretch будет проигнорирован.

Пример

Особенности применения Flexbox на практике

1. Выравнивание по правому краю

Чтобы прижать заголовок сайта влево, а номер телефона вправо, то заголовку надо задать flex: 1.

.header {  display: flex; } .header .title {  flex: 1; }

Если же по какой-то причине тянуть заголовок на всю ширину нельзя, то блоку с номером телефона надо задать margin-left: auto.

.header {  display: flex; } .header .phone {  margin-left: auto; }

Для наглядности блокам добавлены пунктирные границы.

2. Сжатие блоков с длинными словами

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

.serv {  display: flex; } .serv .description {  font-size: 30px; } .serv .call {  margin-left: auto;  width: 120px;  text-align: center;  align-self: center; }

Теперь в описании услуги появляется длинное слово.

Красной границей обозначена ширина смартфона, и если переполнение скрыто (overflow: hidden), то кнопку «Оставить заявку» никто не увидит и заказать услугу не сможет.

Дело в том, что минимальная ширина (min-width) блока description по умолчанию имеет значение auto, что в данном случае равняется ширине слова «пенополистиролбетонных». Значит, flex-элемент не может быть уже, чем это слово.

Решение данной проблемы – указать для flex-элемента нулевую минимальную ширину (min-width: 0). Теперь элемент может быть уже, чем его содержимое. А длинное слово можно просто перенести.

.serv {  display: flex; } .serv .description {  font-size: 30px;  min-width: 0;  word-wrap: break-word; } .serv .call {  margin-left: auto;  width: 120px;  text-align: center;  align-self: center; }

3. Гарантированная ширина

Кнопка «Оставить заявку» по ширине совсем не 120px, как было указано в стилях. Дело в том, что по умолчанию flex-элемент сжимается, если места недостаточно.

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

flex: 0 1 auto Элемент сжимается, если места не хватает, но не тянется шире, чем ему надо.
Соответствует flex: initial и является значением по умолчанию.
flex: 1 1 auto Элемент сжимается, если места не хватает и тянется для заполнения всего доступного пространства. Соответствует flex: auto.
flex: 0 0 auto Элемент не меняет свои размеры. Соответствует flex: none.

Итак, чтобы ширина кнопки «Оставить заявку» равнялась именно 120px, надо ей добавить flex: none.

.serv {  display: flex; } .serv .description {  font-size: 30px;  min-width: 0;  word-wrap: break-word; } .serv .call {  margin-left: auto;  width: 120px;  flex: none;  text-align: center;  align-self: center; }

4. Несколько полезных замечаний

Надо не забывать, что:

  • вертикальное выравнивание (vertical-align) не влияет на flex-элемент,
  • для flex-элементов следует полностью избегать использования margin или padding в %,
  • отступы (margin) соседних flex-элементов никогда не объединяются,
  • z-index на flex-элементе работает даже при position: static,
  • для вертикального выравнивания flex-элементов с различным размером шрифта лучше установить align-items: baseline.

htmlweb.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector