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

►-------------------------------------------------------◄
►-------------------------------------------------------◄
Моя версия шпаргалки по спецификации 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

[klimmansurov]

присоеденяясь ко всем остальным, хочу сказать, шо глубина понимания процессов flex, заставляет восхищаться, спасибо за контент, всего наилучшего

[dmitriysobolle]

Вот это подача!
6 минут, все кристально ясно и понятно! Успехов вам на канале! Спасибо большое!

[yolydifons]

Никак не мог понять flexbox'ы, а тут ты. Спасибо!

[zpv]

Супер видео! Это лучший формат рассказа о свойствах CSS, который я видел. Спасибо! Сделайте, пожалуйста, шпаргалки и на другие свойства

[BortMechanick]

5:04 - речь идёт о flex-shrink, но на картинке показан flex-grow. В этот момент на экране говорят, что flex-shrink является коэффициентом сжатия(чем больше цифра, тем больше сжимается элемент при дефиците места), а на картинке элемент с flex-shrink:2 наоборот, занимает больше места, чем его соседи с flex-shrink-1.

[vitaliimaksymenko]

Краткость - сестра таланта. Огромный респект за обьяснение. Некоторые вещи понял только с этой шпаргалки.

[yrtrk]

Лучшее видео по флекс-бокс, - коротко и понятно.

[Хостингкакпользоваться]

спасибо таким людям которые делают так качественно свои уроки, реально выручаете! благодарочка!!

[CJAlos]

Это великолепно! Буря положительных эмоций! Пожалуйста, не бросайте!

[PhilippeRigovanov]

Почему я увидел это видео только сейчас? Шедеврально!

[AkkayHT]

Вот это я понимаю контент, учили бы всех так в школе)

[samolevich]

Самое крутое видео по данной теме. Спасибо, что не растянули на 40 минут

[Nodorgrom]

Прекрасный урок и прекрасные рисунки =) Спасибо за такой труд!

[Victoria-lyij]

вы такая классная!)) спасибо за ваш труд, у вас талант за 5 минут объяснить то, что другие не могут и за несколько часов)))

[nngogol]

Это *самое лучшее видео*, которое объясняет flex.
Спасибо большое, Aida Drogan, за твой труд!

[mybooks]

Спасибо за полезный урок. Вёрстка для меня - хобби и вот как раз друзья попросили написать шаблон для WordPress, сейчас и попробую Flexbox. И в дополнение к вашему уроку: «justify-content: space-around» - элементы имеют одинаковые поля, а одинаковое расстояние между элементами это - «justify-content: space-evenly».

[АнтонОсташов-жъ]

Вы такая умничка, вот было здорово если бы вы показывали и проводили марафоны по созданию сайтов на ютубе, а потом приглашали на обучение к себе, и нам хорошо и вы бы заработали

[xaea-]

Мой палец вверх вам и подписка. Лучшее видео по флексбоксу для новичков из всех что я встречал!
И да, в видео, к сожалению, есть ошибки, но как по мне, не критичные!

[trooman]

Блин, ты крутая! Сохранил себе скриншоты в качестве памятки на всякий! Жирный лайк ставлю!

[abirkulov]

Очень годно и в своем стиле в плане визуализации. Спасибо )