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

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

В этой статье будет рассказано, как вы можете использовать определенные свойства flex. Сюда входят свойства flex-direction, justify-content, align-self, align-items, align-content и gap.

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

Пример структуры, которую вы можете использовать для изучения основы флексбокса представляет собой набор дочерних div под одним родительским div. В приведенном ниже коде есть основной «родительский» div. Три дочерних элемента div представляют собой элементы, которые можно выровнять с помощью свойств flex.

Чтобы любой гибкий стиль работал, вам нужно добавить дисплей: гибкий свойство родительского гибкого контейнера.

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

Без flex дочерние элементы div отображаются один за другим в виде столбца вниз по странице.

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

Как контролировать направление макета

flex-направление свойство определяет направление строки или столбца дочерних элементов.

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

flex-направление: строка | колонка | ряд-обратный | обратная колонка

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

HTML:

CSS:

.red { цвет фона: красный; }
.orange {цвет фона: оранжевый; }
.yellow {цвет фона: желтый; }
.green {цвет фона: зеленый;}
.blue {цвет фона: синий; }
.purple {цвет фона: фиолетовый; }
.родительский раздел {
 ширина: 40 пикселей;
 высота: 40 пикселей;
}

Примените свойство flex-direction к родительскому контейнеру flex. Это выровняет дочерние элементы div.

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

Многие гибкие свойства относятся к концепции главной оси и поперечной оси. Когда flex-direction ряд, главная ось представляет горизонтальное направление, а поперечная ось представляет вертикальное. Значение столбца переключает эти оси.

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

Как выровнять элементы вдоль поперечной оси

выравнивание элементов Свойство управляет выравниванием элементов вдоль поперечной оси. Для flex-direction, row, align-items управляет вертикальным выравниванием элементов.

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

элементы выравнивания: flex-start | гибкий конец | выравнивание элементов | потягиваться

Добавьте свойство align-items в родительский контейнер, чтобы выровнять его дочерние элементы.

.родитель {
 дисплей: гибкий; 
 выравнивание элементов: flex-start;
}

Кроме того, вы можете выбрать выравнивание элементов по базовой линии. По умолчанию параметр базовой линии выравнивает все элементы на основе элементов.

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

элементы выравнивания: базовый | первый базовый | последний базовый уровень;

Для работы align-items: baseline убедитесь, что каждый элемент имеет разную высоту или ширину (в зависимости от используемой оси).

​​​

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

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

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

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

выравнивание: авто | гибкий старт | гибкий конец | центр | базовый | потягиваться

Скажем, например, что родительский контейнер имеет стиль flex-direction, установленный на «row».

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

Вы можете применить свойство align-self к отдельному элементу. Отдельный элемент будет использовать стиль свойства align-self и будет центрировать элемент в родительском контейнере.

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

Как распределить линии по поперечной оси

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

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

выравнивание содержимого: flex-start | гибкий конец | центр | растянуть | пространство между | пространство вокруг

Добавьте свойство align-content в родительский контейнер flex. Свойство align-content будет работать, только если установлено свойство flex-wrap. Добавьте flex-wrap: оберните родительский контейнер и уменьшите ширину родительского div, чтобы разместить элементы более чем на одной строке.

.родитель {
 flex-wrap: обернуть;
 дисплей: гибкий;
 выравнивание содержимого: flex-start;
 ширина: 180 пикселей;
}

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

Как выровнять элементы по главной оси

выравнивание содержания Добавляет выравнивание по правому краю, по левому краю или по центру для дочерних элементов. Он также распределяет элементы, добавляя пробелы между ними при выравнивании содержимого.

Опции для свойства justify-content включают:

выравнивание содержимого: flex-start | гибкий конец | центр | пространство между | пространство вокруг | пространственно-равномерно

Оберните элементы, которые вы хотите выровнять, в родительский гибкий контейнер.

HTML:

CSS:

.red { цвет фона: красный; }
.green {цвет фона: светло-зеленый; }
.blue {цвет фона: синий; }

Добавьте свойство justify-content в родительский контейнер flex.

.родитель {
 ширина: 300 пикселей;
 дисплей: гибкий; 
 выравнивание содержимого: flex-start;
}

Свойство justify-content также поддерживает значения, перечисленные в спецификации CSS Box Alignment. Сюда входят такие значения, как «начало», «конец», «слева» и «справа». Некоторые браузеры их не поддерживают.

Свойство justify-content также имеет «безопасное» ключевое слово, которое вы можете использовать. Это гарантирует, что элементы будут стараться оставаться в пределах диапазона родительского контейнера.

Он также используется для предотвращения потери данных, если вы центрируете длинное слово. Использование ключевого слова safe не позволяет более короткому div обрезать первую и последнюю буквы.

.родитель {
 дисплей: гибкий; 
 justify-content: безопасный центр;
}

Ключевое слово safe также ограничено некоторыми браузерами. Вы можете проверить совместимость на Могу ли я использовать.

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

Как добавить интервал между элементами

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

Примените свойство gap к родительскому гибкому контейнеру.

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

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

.родитель { 
 ширина: 300 пикселей;
 зазор: 120 пикселей;
}

Если вы используете flex-wrap: wrap для перемещения элементов на новую строку, величина зазора также будет применяться к пространству между строками.

.родитель { 
 ширина: 300 пикселей;
 flex-wrap: обернуть;
 зазор: 120 пикселей;
}

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

Свойство row-gap определяет расстояние между строками. Свойство column-gap определяет расстояние между каждым столбцом.

.родитель { 
 междустрочный интервал: 120 пикселей; 
}
.родитель { 
 зазор между столбцами: 120 пикселей; 
}

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

Использование дополнительных свойств Flex на вашем веб-сайте

Надеюсь, теперь вы знакомы с различными свойствами flex, которые можно использовать для выравнивания элементов на веб-странице. Это включает в себя то, как вы можете использовать свойства flex-direction, justify-content, align-self, align-items, align-content и gap.

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

11 полезных инструментов для проверки, очистки и оптимизации файлов CSS

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

Об авторе