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

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

ФЛЕКСБОКСЫч2

Будет рассматриватсья управление размерами элементов

Ширина, высота, внутренние отступы и рамки для флекс-контейнеров и флекс-элементов работают как обычно: общий размер элементов складывается из этих компонентов. Это поведение так же можно менять с помощью свойства box-sizing.

Есть и несколько важных отличий:

· флекс-элементы, в отличие от блочных элементов, не растягиваются на всю ширину контейнера по умолчанию;

· на флекс-элементы не действует свойство float.

Особенности свойства margin [2/28]

В предыдущем задании мы не упомянули про свойство margin, ведь оно таит много сюрпризов:

· внешние отступы не схлопываются, ни по горизонтали, ни по вертикали;

· внешние отступы не выпадают, ни из флекс-контейнера, ни из флекс-элементов;

· значение auto получило премию журнала Форбс в номинации «Самое влиятельное значение CSS-свойства внутри флекс-контейнера».

Всё дело в механизме распределения свободного места. Если внутри флекс-контейнера есть свободное место, то оно перераспределяется так:

1. находятся элементы, у которых есть внешние отступы со значением auto;

2. всё свободное место в соответствующих направлениях отдаётся таким отступам (то есть задаётся определённый размер отступа в пикселях);

3. если элементов с автоматическими отступами на одном направлении несколько, то место между ними перераспределяется поровну;

4. только после этого запускаются механизмы выравнивания.

Поэтому margin: auto; влияет на положение флекс-элементов на обеих осях, а также «ломает» механизмы выравнивания, ведь выравнивание происходит, когда есть свободное место. Но если всё свободное место «перетекло» в автоматический отступ, то и выравнивать нечего.

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

Итого автоматический внешний отступ влияет на положение флекс-элементов на главной оси. Кроме того, мы убедились, что такие отступы «ломают» свойство justify-content.

Автоматический margin влияет и на выравнивание флекс-элементов вдоль поперечной оси.

Если у флекс-элемента отступ сверху или снизу автоматический, то на него не влияют, ни align-items, ни align-self. Такой элемент прижмётся либо к верху контейнера, либо к низу.

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

 

Направление главной оси и внешние отступы [4/28]

Будет ли результат таким, как на картинке снизу, если повернуть главную ось в предыдущем задании?

Нет, не будет!

Дело в том, что «старые нефлексовые» свойства, такие как отступы или размеры, ничего не знают про направление осей. Они «мыслят по-старому», понятиями «верх» и «низ», «право» и «лево».

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

То же относится и к вертикальным отступам.

 

 

Базовый размер флекс-элемента, flex-basis [5/28]

На примере отступов видно, что «старые» свойства внутри флекс-контейнера ведут себя достаточно глупо. Ширина и высота тоже не умеют реагировать на поворот главной оси. Поэтому ввели понятия главный размер или main size и поперечный размер или cross size.

Если главная ось направлена горизонтально, то главный размер — это ширина, свойство width, а поперечный размер — это высота, свойство height. Если главная ось направлена вертикально, то всё наоборот.

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

И такое свойство есть — это flex-basis. Оно задаёт базовый размер флекс-элемента или размер вдоль главной оси.

Если flex-basis не задан или его значение равно auto, то базовый размер берётся из widthили height.

Свойство flex-basis принимает те же значения, что и width/height:

flex-basis: 100px; /* базовый размер 100 пикселей */flex-basis: 50%; /* базовый размер 50% контейнера */

Свойство flex-basis «сильнее» свойств width и height, и если у флекс-элемента заданы все три свойства, то flex-basis переопределит либо ширину, либо высоту в зависимости от направления главной оси.

 

 

Коэффициент растягивания элементов, flex-grow [7/28]

В предыдущем задании мы кое о чём умолчали. На самом деле, базовый размер — это не просто размер элемента вдоль главной оси, это начальный или исходный размер вдоль главной оси.

Почему так важны эти начальный или исходный?

И снова всё дело в механизме перераспределения свободного места во флексбоксе.

Если внутри флекс-контейнера по главной оси остаётся свободное место, то мы можем попросить флекс-элемент, чтобы он увеличился и занял это место. Это делается с помощью свойства flex-grow, которое можно назвать «коэффициентом флекс-жадности» флекс-элемента.

Свойство flex-grow принимает неотрицательные числовые значения, его значение по умолчанию — 0.