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

►-------------------------------------------------------◄ Вступайте в нашу группу на Facebook https://www.facebook.com/groups/blondiecode Не проходите мимо самого дружелюбного чата BlondieCodeJS (https://t.me/joinchat/Dm6kJQ2ZnUZSXMMmZqzlsA). Здесь можно получить ответы на любые вопросы о программировании, найти стикеры с котиками и пообщаться с интересными людьми ;) ►-------------------------------------------------------◄ Моя версия шпаргалки по спецификации 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