Шпаргалка по Flexbox

Описание: ►-------------------------------------------------------◄
Вступайте в нашу группу на Facebook   / blondiecode  
Не проходите мимо самого дружелюбного чата BlondieCodeJS (https://t.me/joinchat/Dm6kJQ2ZnUZSXMM.... Здесь можно получить ответы на любые вопросы о программировании, найти стикеры с котиками и пообщаться с интересными людьми ;)
►-------------------------------------------------------◄
Моя версия шпаргалки по спецификации CSS Flexible Box Layout Module.
Рассмотрим что такое Flexbox в картинках.
Flexbox - будущее верстки веб-страниц. Flexbox - самый удобный способ создать резиновый макет.
Макет флексбокс состоит из flex-контейнера и flex-блоков. Для инициации нужно добавить в css контейнера display:flex.
Flexbox поддерживается браузерами: Chrome 21+, Opera 12.1+, Firefox 22+, Safari 6.1+, IE 10+.
Блоки внутри флекс-контейнера становятся резиновыми, они сжимаются, растягиваются и выравниваются по осям по заданным правилам. Flexbox адаптирован под браузеры с локалью rtl (для языков которые читаются справа налево).

Для блока во флекс-контейнере можно задать margin: auto и блок центрируется и по горизонтали и по вертикали.
У флекс-контейнера есть 2 оси - главная и поперечная. Свойство flex-direction отвечает за направление главной оси (значения column, row, row-reverse, column-reverse). Свойство justify-content отвечает за выравнивание по главной оси (flex-start, flex-end, center, space-between, space-around). Свойсво align-items выравнивание по поперечной оси ( flex-start, flex-end, center, baseline - выравнивание по базовой линии (это линия на которой сидят буквы шрифта, при этом хвостики как у ц или р свисают вниз), stretch).
Для того, чтобы контейнер обтекал свои блоки нужно указать ему свойство flex-wrap (wrap, nowrap, wrap-reverse).
Можно записать направление и обтекание одним свойством flex-flow.
Свойство flex-basis это размер блока по главной оси контейнера. Может быть задан конкретным числом в пикселях, процентах или em, а может принимать значение auto, тогда размер флекс-блока будет равен размеру его содержимого.
Свойство flex-grow или жадность определяет во сколько раз этот блок будет больше своих соседей (по умолчанию flex-grow = 0).
flex-shrink это коэффициент сжимаемости блока, по умолчанию равен 1 и определяет на сколько блок готов ужаться относительно своих соседей, если место в контейнере закончится.
Свойство order - порядок следования элементов в контейнере.
Можно также выровнять отдельно взятый блок по оси при помощи align-self.
#BlondieCode #flexbox #frontend