Как сверстать сайт на Flex + Примеры кода

Flexbox верстка сайтов с примерами кода

Опытные web-разработчики хорошо знают о том, что сегодня существуют самые разные способы верстки сайтов, каждый из которых имеет свои особенности и преимущества. В последнее время особую популярность приобретает модель верстки Flexbox (флекс), в основе которого лежит нативный метод создания страниц с помощью каскадных таблиц. Освоив такой способ адаптивной верстки, можно значительно ускорить процесс создания сайта, успешно применяя для этого гибкие макеты.

Что представляет собой Flexbox верстка сайтов

Название Flexbox происходит от сокращения 2-х английских слов - flexible box (гибкий / резиновый блок), что и лежит в основе такого способа. Такая верстка отличается удобством и функциональностью, поскольку дает возможность не только использовать готовые каркасы, но и создавать отдельные (независимые) элементы HTML страницы. Расширенный функционал позволяет использовать достаточно простые решения для реализации очень сложных задач, затрачивая на это минимум времени сил.

При помощи Flexbox можно удобно контролировать все возможные параметры элементов, расположенных внутри самого контейнера, включая следующее:

По сути, Flex представляет собой набор некоторых правил, благодаря которым обеспечивается автоматическое растягивание нескольких столбцов, а также строк внутри главного (родительского) контейнера. Благодаря этому web-разработчик может легко выравнивать элемент по горизонтали или вертикали, прижать подвал к нижней части экрана, а также вставить один или несколько блоков в ряд, чтобы они равномерно заняли все свободное пространство.

Базовые понятия Flexbox

Многие задачи можно решить и без использования Flex, однако зачем тратить дополнительные усилия, если можно просто применить нативную верстку, которая особенно важна при разработке web-сайта под мобильные устройства. К главным свойствам Flex контейнера можно отнести следующее:

Ведущая (главная) ось. Это ведущее (главное) направление по расположению элементов самого контейнера. При помощи функции flex-direction разработчик может свободно менять направление ведущей оси. Однако следует быть внимательным, поскольку при этом изменяется движение блоков. В то же время, конец, начало и размеры контейнера остаются неизменными.

Поперечная ось. Это является осью, расположенной перпендикулярно относительно главной. Чаще всего используется для направления движения элементов в случае, когда они не умещаются в контейнер по направлению ведущей.

Начало/конец главной оси. Включают в себя все элементы, которые располагаются на участке от начала и до самого конца контейнера.

Поперечный и главный размер. Базовая величина, которая позволяет рассчитать высоту и ширину, используя систему растяжения и сужения. Применяется в случае, если размер указан не совсем точно или выражен в процентном отношении.

Визуальное отображение понятий.
Визуальное отображение понятий.

Чтобы применить параметр flexbox к выбранному элементу системы HTML, необходимо присвоить свойство display: inline-flex или display:flex. Для этого следует добавить следующий код:


    <style>
        .flex-container {
            display: flex;
        }
    </style>

    <div class='flex-container'>
        <div class='flex-item'>1</div>
        <div class='flex-item'>2</div>
    </div>
    

Важно помнить, что по умолчанию главной осью является горизонтальная и имеет стандартное направление слева направо (→). Соответственно, перпендикулярной ей является вертикальная (кросс) ось, направленная сверху вниз (↓). При необходимости кросс ось можно свободно поменять местами, скорректировав тем самым параметры.

При этом конец и начало расположения элементов не изменятся, поскольку меняется исключительно направление оси. Примечательно, что ось обозначает лишь направление движения элементов внутри самого контейнера и не более того. Таким образом, при изначальном выравнивании элементов по центру основной оси и последующей смене направления, элементы, которые были по горизонтали в середине, останутся там же, но только автоматически скорректировавшись уже по вертикали.

Выравнивание по главной оси (элементы прижаты к левой части страницы).
Выравнивание по главной оси (элементы прижаты к левой части страницы).

Важно помнить, что стандартные характеристики CSS, влияющие на модель построения макета (vertical-align, float, columns и clear) в системе flex не функционируют, поскольку здесь используется иной принцип построения макета.

Главные свойства и характеристики Flexbox в CSS

Для лучшего понимания всех свойств и особенностей Flexbox верстки сайтов, стоит подробней рассмотреть их основные характеристики и свойства:

Flex-Direction. Свойство, позволяющее сменить направленность ведущей оси контейнера. При этом поперечная ось меняется автоматически, без добавления дополнительных свойств. Здесь выделяют такие значения:

Важно понимать, что при переходе с column-reverse на row-reverse или же с column на row корректируется исключительно направление оси.

Display. Свойство, flex контейнера. Определяет будут ли дочерние элементы располагаться как элементы флех контейнера.

Следует учитывать, что inline-flex и flex по-разному взаимодействуют с окружающими компонентами.

Align-items. Свойство, которое используется для выравнивания компонентов внутри ряда, причем по поперечной оси. Для этого здесь используются следующие команды:

В отличие от обычной блочной верстки, в Flex имеется главный контейнер и вложенные в него элементы, причем одни flex-свойства предназначены исключительно для самого контейнера, а другие, для элементов, расположенных внутри.

Flex свойства для элементов контейнера

Flex-shrink. Опция, которая задает нужный коэффициент, используемый для уменьшения элемента. При этом уменьшение будет производиться пропорционально заданному значению. Здесь могут использоваться не только целые, но и дробные числа, к примеру: «0.5 - flex-shrink:0.5».

Flex-basis. Свойство устанавливает базовую ширину компонента, причем до того, как будут введенные прочие условия, которые повлияют на данный параметр. По умолчанию, здесь устанавливается значение auto. Однако в ряде случаев разработчики сразу меняют его значение width, поскольку в таком случае удается запустить свойства flex-shrink и flex-grow.

Align-self. Свойство, которое позволяет корректировать параметр align-items, но только для конкретных (отдельных) элементов. Здесь возможны следующие значения:

Это далеко не все свойства, поскольку в CSS Flexible Box Layout их достаточно много, что позволяет web-разработчику максимально точно выполнить верстку, успешно реализовав на практике лучшее стилевое решение.

Примеры использования Flexbox при верстке сайтов

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

Адаптивное меню на flex-е


    <div class='nav'>
        <a href='#'>Главная</a>
        <a href='#'>О нас</a>
        <a href='#'>Контакты</a>
    </div>

    <style>
        .nav {
            display: flex;
            justify-content: flex-end;
            background: #6e9cc3;
        }

        .nav a {
            color: #fff;
            padding: 15px 10px;
        }

        @media (max-width: 800px) {
            .nav {
                justofy-content: space-around;
            }

            // Растянуть на всю ширину
            .nav a {
                flex: 1;
            }
        }
    </style>
    

Это позволяет сделать меню в верхней части страницы, но на широком экране иконка будет располагаться с правой стороны.

Создание 3-х адаптивных колонок.


    <div class='flex'>
        <div class='item'>1</div>
        <div class='item'>1</div>
        <div class='item'>1</div>
        <div class='item'>1</div>
    </div>

    <style>
        .flex {
            display: flex;
            flex-wrap: wrap;
            max-width: 700px;
            margin: 0 auto; // выравниваем по центру
        }

        .item  {
            flex: 1 1 calc(33%  - 30px);
            margin: 5px;
            min-width: 170px;
        }
    </style>
    

Используя данный код, можно легко и просто сформировать 3 колонки, которые при сужении автоматически будут превращаться в 2, а потом уже и в 1.

Выводы

Опыт разработчиков свидетельствует о том, что освоить Flexbox не сложно, зато в результате можно верстать сайты не только быстрее, но и правильнее, делая их максимально удобными, красивыми и функциональными для конечного посетителя.

An error has occurred. This application may no longer respond until reloaded. Reload 🗙