Один из моих слушателей попросил на моем youtube канале о создании урока на тему flexbox CSS. С удовольствием выполняю просьбу слушателя.
Будьте внимательны, прежде чем использовать flexbox в своих проектах — эта технология поддерживается в самых актуальных версиях браузеров. Два приципа, которые важно понять при верстке flexbox — это оси и отношение элемента «родитель-ребенок». Блоки во flex контейнере могут располагаться слева направо или сверху вниз. Поэтому относительно их расположения надо рассматривать две оси — главную и поперечную. Главная ось повторяет направление расположения блока (слева направо или сверху вниз). Поперечная ось всегда перпендикулярна главной.
Прежде всего в начале надо прописать в контейнере-родителе правило display:flex;
А далее уже применять правила, исходя из ваших потребностей. Ниже список правил и их важность. Примеры применения смотрите в видео.
Для контейнера:
display: flex;
flex-direction — расположение блоков внутри контейнера (тип блока)
justify-content — выравнивание блока в контейнере по главной оси
align-items — выравнивание блока в контейнере по поперечной оси
align-content — вертикальное выравнивание блока (толко в связи с flex-wrap)
flex-wrap — разрешает мультистрочный режим расположения блоков
Для дочерних:
flex-basis — размер дочернего flex блока
flex-grow — размер относительно других дочерних блоков
flex-shrink — cжатие блока относительно другого
flex — универсальное правило, объединяющее в себе flex-grow, flex-basis и flex-shrink.
order — определяет порядок следования дочерних блоков в контейнере. По умолчанию порядок равен 0.
Код урока - http://kamil-abzalov.ru/videouroki/html-css/css-flexbox/
