Flexbox-2. Flex-элемент и его свойства

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

В статье живой код с Codepen. Чтобы отображение результата в нем выглядело так, как я задумал для иллюстрации свойств flexbox, читайте на настольком ПК с размером экрана от 1200px, иначе некоторые примеры будут не очевидны из-за того, что контейнер станет уже.

1. flex-basis – базовая ширина flex-элемента

Свойство flex-basis определяет начальную ширину flex-элемента. Ширину до того, как к нему будут применены другие свойства, влияющие на ширину (о них ниже).
По умолчанию равно auto. Можно задавать как в px, так и в процентах, em и прочих единицах.
По сути это не ширина – а начальное значение ширины, от которого реальная ширина в итоге “пляшет”.

2. flex-grow – доля свободного места внутри контейнера

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

See the Pen flexbox-21 by molodezky (@molodezky) on CodePen.light

3. flex-shrink – определяет возможность flex-элемента сжиматься при необходимости

flex-shrink указывает, как конкретный flex-элемент будет сжиматься, если в сумме ширина всех flex-элементов в контейнере будет больше, чем ширина самого контейнера.
flex-shrink также как и flex-grow задается целым числом или нолем.
По умолчанию flex-shrink имеет значение 1. Т.е. все flex-элементы в контейнере будут ужиматься, подгоняя свою ширину под размер контейнера, на одинаковую величину.
При разных значениях принцип схож – ужиматься flex-элементы будут пропорционально значениям flex-shrink.
В примере ниже для flex-элементов задана базовая ширина flex-basic: 400px. По факту же она пропорционально ужалась до 257px.

See the Pen flexbox-22 by molodezky (@molodezky) on CodePen.light

На практике часто все три свойства задают сокращенной записью при помощи выражения flex.
flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>;
По умолчанию flex имеет значение 0 1 auto. Именно такие значения по умолчанию имеют свойства, из которых складывается flex.
При этом значения flex-shrink и flex-basis здесь не обязательны. Их можно не задавать.

4. order – положение flex-элемента в потоке

Магия! Свойство order позволяет перемещать flex-элемент на нужное нам место внутри flex-контейнера.
order может быть любым целым числом, в том числе и отрицательным.
По умолчанию все flex-элементы имею значение order – 0.
В примере ниже я задал для 5-го flex-элемента order равный -1, и он вывелся самым первым в строке.

See the Pen flexbox-23 by molodezky (@molodezky) on CodePen.light

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

align-self позволяет переопределить для отдельных flex-элементов выравнивание, заданное по умолчанию или в align-items. Посмотрите предыдущую запись «Flexbox-1. Flex-контейнер и его свойства», я там подробно расписал свойство align-items. Тут все тоже самое, только назначается и применяется для flex-элемента.
Может принимать значения auto, flex-start, flex-end, center, baseline, stretch.
В примере ниже я задал для 5-го элемента align-self: flex-end. Тем самым переопределив положение с stretch, которое было у всех элементов по умолчанию, на flex-end.

See the Pen flexbox-24 by molodezky (@molodezky) on CodePen.light

В следующей статье рассмотрим применение технологии flexbox на практике.