Дизайн HTML-страниц. Язык CSS (ч.12)

Разберем что такое flexbox и для чего он используется.

Это такой набор параметров в CSS, который помогает удобно располагать дочерние блоки какого-либо большого блока или другими словами контейнера.

То есть вам не надо заморачиваться с float, внутренними отступами, выравниванием и так далее.

Но самым главным плюсом я считаю адаптивность. Да, это наше первое знакомство с адаптивным дизайном - очень важно деталью в любом сайте.

Что я вообще называю адаптивностью (не только я конечно) - это такой "резиновый" дизайн сайта, который одинаково красиво отображается на устройствах с различными размерами экранами.

Будь то маленький экран смартфона или огромный дисплей смарт-телевизора. Ничего не должно съезжать, криво отображаться и все в этом роде.

Как проверять ваш дизайн на различных размерах экрана? Вы можете просто уменьшать окно браузера и сымитировать просмотр с маленького экрана.

Странички из всех предыдущих статей были не адаптивными, вы можете это проверить сузив окно браузера на тех примерах.

Ах да, забыл - из адаптивного у нас уже были элементы со свойством float - но этот параметр не так удобен как flexbox, сейчас вы поймете почему.

Итак, давайте напишем для примера такую простенькую html-страницу:

Создал один большой контейнер и пять дочерних блоков. Делать мы будем адаптивное меню для сайта.

Сейчас если вы откроете эту страничку в браузере, то увидите обычный столбик из надписей и ничего больше.

Давайте для наглядности зададим нашим дочерним блокам немного стилей:

Что мы тут задали: цвет фона - серый, внутренние отступы каждого блока от текста до каждой границы по 10 пикселей, цвет текста - белый, ну и рамка - толщина 4 пикселя, и цвет чуть потемнее серого.

Выглядит это так:

Что делаем дальше: Добавим классу "container" свойство display: flex;

Теперь обновляем страницу и видим, что элементы теперь расположены на одной строке. С помощью свойства display: flex мы показали, что все дочерние элементы контейнера располагаются в так называемом flexbox-е - к ним применимы специальные CSS-параметры.

Отлично, но нам нужно адаптивное меню на всю ширину экрана!

Теперь попробуем несколько свойств:

justify-content: center; - контейнер с блоками расположится по центру

justify-content: flex-end; - контейнер выровняется по правому краю (или по последнему блоку в html)

justify-content: flex-start; - по левому краю или по первому блоку во flexbox

justify-content: space-between; - вот тут начинается полезная адаптивность, наши блоки с таким свойством будут равномерно разделены пробелами и расположены по всей ширине экрана. Если вы уменьшите размер экрана, то наше меню по прежнему будет расположено на всю ширину, только немного уменьшатся пробелы между блоками и сами блоки.

justify-content: space-around; - почти тоже самое что и предыдущее свойство, но только тут пробелы будут еще и возле боковых элементов - они не будут в плотную прилипать к странице. То есть у каждого блока будет одинаковый отступ и слева и справа. При сужении окна браузера это очень заметно.

flex-direction: row; - расположение элементов в строку (этот параметр идет по умолчанию)

flex-direction: row-reverse; - расположение элементов в строке в обратном порядке (порядок обратен тому, который указан в html)

flex-direction: column; - постоянно используется для вертикальных меню

flex-direction: column-reverse; - как и со строчным флексбоксом, обращает заданный в html порядок элементов.

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

@honey_and_money - Проживи так, чтобы о тебе еще долго вспоминали!