Как использовать Flex, чтобы сделать ваш сайт более отзывчивым

Современный дизайн веб-сайтов должен реагировать на изменения содержимого или размера браузера. Вы можете добиться этого, используя ванильный CSS, медиа-запросы или flexbox.

Некоторые гибкие свойства, такие как flex-wrap или flex-grow, могут изменить размер или расположение элемента визуально привлекательным образом. В этой статье будут рассмотрены примеры использования свойств flex-grow, flex-shrink, flex-wrap, flex-flow и order flex.

Как настроить отображение CSS Flex

Если вы не знакомы с основы флексбокса, вы можете изучить это Фрагмент CodePen. Он включает в себя пример кода для простой настройки flexbox. Во-первых, вам нужно будет поместить дочерние элементы в родительский div или «flex-контейнер».

<раздел класс ="родитель">
<раздел класс ="дочерний элемент"></div>
<раздел класс ="дочерний элемент"></div>
<раздел класс ="дочерний элемент"></div>
</div>

Добавить дисплей: гибкий свойство родительского div.

.родитель {
 дисплей: гибкий;
}

Как выращивать элементы в контейнере

гибкий рост Свойство позволяет дочерним элементам расширяться, чтобы заполнить пространство, доступное в его родительском div. Это свойство позволяет указать «соотношение» объема пространства, которое может занимать каждый элемент коробки.

Чтобы добавить flex-grow, добавьте свойство CSS flex-grow к каждому из дочерних элементов.

<раздел класс ="родитель">
<стиль div="цвет фона: красный; гибкий рост: 1"></div>
<стиль div="цвет фона: оранжевый; гибкий рост: 1"></div>
<стиль div="цвет фона: желтый; гибкий рост: 1"></div>
<стиль div="цвет фона: зеленый; гибкий рост: 3"></div>
<стиль div="цвет фона: синий; гибкий рост: 1"></div>
</div>

.родитель {
 ширина: 500 пикселей;
 дисплей: гибкий; 
}

Значение flex-grow, равное 0, для каждого элемента означает, что поля не будут расширяться, чтобы заполнить пространство своего родителя. 0 — это значение по умолчанию для этого свойства.

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

Например, если один из элементов имел большее значение flexgrow:

<стиль div="цвет фона: зеленый; гибкий рост: 3"></div>

Зеленое поле попытается получить в три раза больше места, чем другие поля.

Просмотрите код свойства flex-grow в этом Фрагмент CodePen чтобы увидеть рабочий пример.

Как уменьшить элементы внутри контейнера

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

Flex-shrink позволяет указать коэффициент сжатия каждого элемента.

Добавьте свойство flex-shrink к дочерним элементам div. Измените ширину родительского и дочернего элементов, чтобы элементы не помещались в контейнер.

<раздел класс ="родитель">
<стиль div="цвет фона: красный; гибкая усадка: 1"></div>
<стиль div="цвет фона: оранжевый; гибкая усадка: 1"></div>
<стиль div="цвет фона: желтый; гибкая усадка: 1"></div>
<стиль div="цвет фона: зеленый; гибкая усадка: 2"></div>
<стиль div="цвет фона: синий; гибкая усадка: 1"></div>
</div>

.родитель {
 ширина: 500 пикселей;
 дисплей: гибкий; 
}
.родитель дел {
 ширина: 150 пикселей;
 высота: 150 пикселей;
}

Значение flex-shrink, равное 1, для всех элементов означает, что все элементы будут сжиматься одинаково, если ширина родителя будет уменьшена.

Если у одного из элементов был больший flex-shrink, например:

<стиль div="цвет фона: зеленый; гибкая усадка: 2"></div>

Зеленая коробка попытается сжаться в два раза больше, чем другие коробки.

Просмотрите код свойства flex-shrink в этом Фрагмент CodePen чтобы увидеть рабочий пример.

Как переместить элементы в следующую строку

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

Параметры свойства flex-wrap включают:

гибкая обертка: nowrap | обернуть | обертка-обратная

Добавьте свойство flex-wrap в родительский flex-контейнер. Убедитесь, что ширина контейнера достаточно мала, чтобы в него не помещались дочерние элементы. Это приведет к тому, что любые переполняющие элементы будут помещены в новую строку.

<раздел класс ="родитель">
<раздел класс ="красный"></div>
<раздел класс ="апельсин"></div>
<раздел класс ="желтый"></div>
<раздел класс ="зеленый"></div>
<раздел класс ="синий"></div>
</div>

.родитель {
 ширина: 300 пикселей;
 граница: 1px сплошной черный;
 дисплей: гибкий;
 flex-wrap: обернуть;
}
.родитель дел {
 ширина: 100 пикселей;
 высота: 100 пикселей;
}

Значение переноса поместит элементы, начиная с правого верхнего края контейнера. Значение wrap-reverse переместит элементы так, чтобы они начинались в правом нижнем углу контейнера. При переносе элементов он будет помещать элементы в новую строку выше, а не ниже.

Если вы укажете высоту родительского контейнера, контейнер добавит интервал между строками элементов.

Если вы хотите удалить этот интервал, но сохранить высоту родительского элемента div, используйте свойство align-content. Укажите свойство align-content как «flex-start» в родительском div:

.родитель { 
 ширина: 300 пикселей; 
 высота: 300 пикселей;
 граница: 1px сплошной черный; 
 дисплей: гибкий;
 flex-wrap: обернуть; 
 выравнивание содержимого: flex-Начало;
}

Свойство align-content является одним из нескольких основных свойства flexbox, позволяющие управлять выравниванием.

Просмотрите код свойства flex-wrap в этом Фрагмент CodePen чтобы увидеть некоторые примеры.

Как переместить элементы в следующий столбец

Если вы используете другой макет (например, столбец) и вам по-прежнему нужно обтекать элементы, вы можете использовать метод гибкий поток свойство. Это свойство flex является комбинацией свойств flex-wrap и flex-direction.

Примеры комбинаций параметров, которые можно использовать для свойства flex-flow, включают:

flex-wrap: row nowrap | колонка сейчас | обертывание строк | обертывание колонны | обратный перенос строки | Обратный перенос столбца

Это свойство работает аналогично свойству flex-wrap выше. Добавьте flex-flow в родительский контейнер flex. Убедитесь, что ширина родительского контейнера достаточно мала, чтобы принудительно обернуть дочерние элементы:

.родитель {
 ширина: 300 пикселей; 
 граница: 1px сплошной черный; 
 дисплей: гибкий; 
 flex-flow: перенос столбца;
}
.родитель дел {
 ширина: 100 пикселей;
 высота: 100 пикселей;
}

Элементы будут переноситься в указанном направлении (строка или столбец).

Просмотрите код свойства flex-flow в этом Фрагмент CodePen чтобы увидеть некоторые примеры.

Как изменить порядок элементов

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

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

Добавьте свойство order к каждому из элементов внутри родительского контейнера flex:

<раздел класс ="родитель">
<раздел класс ="красный" стиль="порядок: 2"></div>
<раздел класс ="апельсин" стиль="заказ: 1"></div>
<раздел класс ="желтый" стиль="порядок: 5"></div>
<раздел класс ="зеленый" стиль="порядок: 4"></div>
<раздел класс ="синий" стиль="порядок: 3"></div>
</div>

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

Просмотрите код свойства заказа в этом Фрагмент CodePen чтобы увидеть некоторые примеры.

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

Вы можете использовать эти гибкие свойства, чтобы сделать ваш сайт более отзывчивым. Сюда входит использование свойств flex-grow, flex-shrink, flex-wrap, flex-flow и order flex.

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

Как использовать Flex для выравнивания HTML-элементов

Читать дальше

Об авторе