CSS. Flexbox

Главная » Видеоуроки » HTML+CSS » CSS. Flexbox
Один из моих слушателей попросил на моем 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.

Код урока (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 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Pin It on Pinterest

Share This