Атрибуты: Параметры координатных контейнеров.

  Отдельные атрибуты стилей координатных контейнеров применяются для установки стилей размещения блоков с пользовательским контентом с использованием технологии flex.
  Как правило, такие блоки создаются на Web-странице полями элементов тегов DIV.

  Отдельные атрибуты стилей координатных контейнеров позволяют "родительскому" элементу управлять относительностью размещения своих "дочерних" элементов.
  "Родительский" элемент обязательно должен быть связан со стилем, установленным значением атрибута display: flex или display: inline-flex.
  Такие элементы еще называют flex-контейнерами (гибкими почему-то, хотя сам flex-контейнер, в отличие от обычных контейнеров, жёстко ограничивает своим полем размещение полей "дочерних" элементов).

  Очевидно, что flex-контейнером можно сделать не только элемент тега DIV, однако в общем это не практикуется.
  Принцип работы flex-контейнера в том, что его в его поле создаётся виртуальная плоская система координат, относительно которой задаётся визуальное (не фактически заданное HTML-кодом) размещение полей "дочерних" элементов этого контейнера на Web-странице.
  Соответственно отдельные атрибуты стилей координатных контейнеров делятся на атрибуты самого flex-контейнера и атрибуты помещённых в него элементов.
  Создание и настройка системы координат.
  Атрибуты стилей для создания и настройки системы координат применяются к flex-контейнеру "родительскому" элементу для элементов, поля которых будут размещаться на Web-странице относительно этой системы координат.
  Атрибуты:
  flex-direction - Устанавливает направление осей системы координат и положение её центра.

Формат:

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

Значения:

  • row - Главная ось направлена горизонтально слева - направо, поперечная вертикально сверху - вниз (умолчание).
      Если применяется атрибут ltr, то наоборот.
  • row-reverse - Главная ось направлена горизонтально справа - налево, поперечная вертикально снизу - вверх.
      Если применяется атрибут ltr, то наоборот.
  • column – Главная ось направлена вертикально сверху - вниз, поперечная горизонтально слева - направо.
  • column-reverse – Главная ось направлена вертикально снизу - вверх, поперечная горизонтально справа - налево.
  Значение row устанавливает центр системы координат в левом верхнем углу поля flex-контейнера.
  Значение row-reverse устанавливает центр системы координат в правом нижнем углу поля flex-контейнера.
  Значение column переворачивает систему координат на 90 градусов, и устанавливает центр системы координат в левом верхнем углу поля flex-контейнера.
  Значение column-reverse переворачивает систему координат на 90 градусов, и устанавливает центр системы координат в правом нижнем углу поля flex-контейнера.
  justify-content - Устанавливает способ выравнивания полей "дочерних" элементов вдоль главной оси.
  Последовательность расположения полей "дочерних" элементов относительно главной оси, при любом значении атрибута justify-contentне, не меняется.

Формат:

  • justify-content:
      flex-start
      |flex-end
      |center
      |space-between
      |space-around

Значения:

  • flex-start - Поля прижимаются к началу главной оси (умолчание).
  • flex-end - Поля прижимаются к концу главной оси.
  • center - Поля располагаются симметрично относительно центра главной оси.
  • space-between - Первое и последнее поля прижаты соответственно к началу и к концу главной оси, остальные симметрично располагаются между ними.
  • space-around - Поля располагаются равномерно вдоль главной оси.
  align-items - Устанавливает способ выравнивания полей "дочерних" элементов вдоль поперечной оси.

Формат:

  • align-items:
      flex-start
      |flex-end
      |center
      |baseline
      |stretch

Значения:

  • flex-start - Поля прижимаются к началу поперечной оси (умолчание).
  • flex-end - Поля прижимаются к концу поперечной оси.
  • center - Поля располагаются симметрично относительно центра поперечной оси.
  • baseline - Поля выравниваются по их общей базовой линии.
      Общая базовая линия виртуально "проходит" по вертикальной середине каждого поля.
  • stretch - Поля располагаются равномерно по поперечной оси.
  flex-wrap - Устанавливает разрешение или запрет многорядного визуального расположения полей "дочерних" элементов вдоль поперечной оси в случае, если их последовательность не войдёт в соответствующий размер flex-контейнера.

Формат:

  • flex-wrap:
      nowrap
      |wrap
      |wrap-reverse

Значения:

  • nowrap - Запрещает многорядное расположение полей (умолчание).
  • wrap - Разрешает многорядное расположение полей.
  • wrap-reverse - Разрешает многорядное расположение полей, однако поля будут располагаться в обратном порядке от последовательности соответствующих элементов в HTML-коде.
  Многорядное расположение визуально создаёт таблицу на Web-странице в поле flex-контейнера.
  У такой таблицы соответственно будут строки, столбцы и ячейки. Каждое поле "дочернего" элемента станет ячейкой.
  Количество строк и столбцов определится по количеству "дочерних" элементов flex-контейнера и по соответствующему размеру их полей.

  Если многорядность не разрешена, то браузер "втиснет" все поля "дочерних" элементов вдоль главной оси flex-контейнера не обращая внимания ни на значение атрибута flex-basis ни на соответствующий размер полей.
  Если, из за их внутреннего контента, все поля "дочерних" элементов не войдут вдоль главной оси flex-контейнера, то, в зависимости от значения атрибута overflow, они либо перекроют друг друга, либо в них появится линейка соответствующего скроллинга.

  Скроллинг же самого flex-контейнера вдоль его главной оси в принципе не возможен, поскольку соответствующий размер flex-контейнера служит ограничителем размещения полей его "дочерних" элементов при разрешённой многорядности.
  flex-flow - Устанавливает одновременно направление осей привязки и разрешение или запрет многорядного расположения полей "дочерних" элементов относительно поперечной оси.

Формат:

  • flex-flow: Направление Многорядность

Значения:

  • Направление - Одно из значений атрибута flex-direction.
  • Многорядность - Одно из значений атрибута flex-wrap.
  align-content - Устанавливает способ выравнивания рядов полей "дочерних" элементов вдоль поперечной оси в случае разрешения многорядности.
  Такое выравнивание возможно, если вдоль поперечной оси есть свободное пространство.

Формат:

  • align-content:
      flex-start
      |flex-end
      |center
      |space-between
      |space-around
      |stretch

Значения:

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

Формат:

  • align-self:
      flex-start
      |flex-end
      |center
      |baseline
      |stretch

Значения:

  • flex-start - Поле прижимается к началу поперечной оси (умолчание).
  • flex-end - Поле прижимается к концу поперечной оси.
  • center - Поле располагается в центре поперечной оси.
  • baseline - Поле выравнивается по общей базовой линии.
      Общая базовая линия виртуально "проходит" по вертикальной середине каждого поля.
  • stretch - Поле располагается равномерно по поперечной оси, занимая все ему доступное простронство.
  flex-basis - Устанавливает базовый размер поля "дочернего" элемента вдоль главной оси flex-контейнера.
  Этот размер хоть и не является относительным, однако визуально на Web-странице поле элемента может изменяться в процессе преобразований в соответствии со значениями других flex-атрибутов.

Формат:

  • flex-basis:
      auto
      |Значение

Значения:

  • auto - Размер устанавливается автоматически исходя из размера внутреннего контента и(или) учитывая значения связанных атрибутов размера (умолчание).
  • Значение - Линейная величина с единицей измерения.
      Это значение имеет преимущество перед соответствующим значением заданным атрибутом height или width.
  Если многорядность не разрешена, то браузер "втиснет" все поля "дочерних" элементов вдоль главной оси flex-контейнера не обращая внимания ни на значение атрибута flex-basis ни на соответствующий размер полей.
  Если, из за их внутреннего контента, все поля "дочерних" элементов не войдут вдоль главной оси flex-контейнера, то, в зависимости от значения атрибута overflow, они либо перекроют друг друга, либо в них появится линейка соответствующего скроллинга.

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

Формат:

  • flex-grow: Число

Значения:

  • Число - Относительное значение в ряде этих же значений других "дочерних" элементов (по умолчанию = 0 ).
      Значение этого атрибута действует только для ряда элементов, у которых значением атрибута flex-basis является auto и размеры полей определяются внутренним контентом этих элементов.
  flex-shrink - Устанавливает пропорцию "сжимаемости" (flex) поля "дочернего" элемента относительно "сжимаемости" полей других "дочерних" элементов в flex-контейнере.
  Поскольку этот размер является относительным, то визуально на Web-странице поле элемента может изменяться в процессе преобразований в соответствии со значениями других flex-атрибутов.

Формат:

  • flex-shrink: Число

Значения:

  • Число - Относительное значение в ряде этих же значений других "дочерних" элементов (по умолчанию = 1 ).
      Значение этого атрибута действует только для ряда элементов, у которых значением атрибута flex-basis является auto и размеры полей определяются внутренним контентом этих элементов.
  flex - Устанавливает одновременно размер поля "дочернего" элемента вдоль главной оси, размер поля "дочернего" элемента относительно размеров полей других "дочерних" элементов и пропорцию "сжимаемости" (flex) поля "дочернего" элемента относительно "сжимаемости" полей других "дочерних" элементов в flex-контейнере.

Формат:

  • flex: Относительный размер Пропорция сжимаемости Базовый размер

Значения:

  • Относительный размер - Одно из значений атрибута flex-grow.
  • Пропорция сжимаемости - Одно из значений атрибута flex-shrink.
  • Базовый размер - Одно из значений атрибута flex-basis.
  order - Устанавливает порядок визуального следования поля "дочернего" элемента относительно полей других "дочерних" элементов вдоль главной оси flex-контейнера.
  Может перекрывать значение align-items для этого блока.

Формат:

  • order: Число

Значения:

  • Число - Относительное значение в ряде этих же значений других "дочерних" элементов (по умолчанию = 0 ).
      Чем выше значение, установленное для элемента, тем дальше визуальное место его поля относительно начала расположения полей всех "дочерних" элементов.
      При равенстве значений у нескольких элементов, последовательность визуального расположения их полей будет соответствовать последовательности размещения их в HTML-коде.

Пример:

<STYLE>
  .container {display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap;}
  .block1 {width: 300px; height: 200px; flex-basis: 70px; order: 1; background-color: white}
  .block2 {width: 300px; height: 200px; flex-basis: 70px; order: 1; background-color: blue}
  .block3 {width: 300px; height: 200px; flex-basis: 70px; order: 1; background-color: red}
  .container:hover {width: 600px; flex-direction: row;}
  .container:hover :nth-child(1) { flex-basis: 100px;}
  .container:hover :nth-child(2) { flex-basis: 100px; order: 0 }
  .container:hover :nth-child(3) { flex-basis: 100px;}
</STYLE>
...........
<DIV class="container">
  <DIV class="block1"></DIV>
  <DIV class="block2"></DIV>
  <DIV class="block3"></DIV>
</DIV> Наведите мышку на флаг.
Наведите мышку на флаг.