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

Опытные 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