CSS. Flexbox
Один из моих слушателей попросил на моем youtube канале о создании урока на тему flexbox CSS. С удовольствием выполняю просьбу слушателя.
Будьте внимательны, прежде чем использовать flexbox в своих проектах — эта технология поддерживается в самых актуальных версиях браузеров. Два приципа, которые важно понять при верстке flexbox — это оси и отношение элемента «родитель-ребенок». Блоки во flex контейнере могут располагаться слева направо или сверху вниз. Поэтому относительно их расположения надо рассматривать две оси — главную и поперечную. Главная ось повторяет направление расположения блока (слева направо или сверху вниз). Поперечная ось всегда перпендикулярна главной.
Прежде всего в начале надо прописать в контейнере-родителе правило display: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.
Код урока (HTML)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.parent {
background: yellow;
display: flex;
flex-direction: row;
height: 700px;
flex-wrap: wrap;
align-content: center;
/*justify-content: flex-start;*/
}
.one {
background: red;
}
.two {
background: purple;
}
.three {
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="one">Блок 1</div>
<div class="two">Блок 2</div>
<div class="three">Блок 3</div>
</div>
</body>
</html>
0 Comments