Компонент ширины часто используется в сочетании с сетками для разделения содержимого на адаптивные столбцы. В этой статье объясняет все, это как сосредотачиваясь на всех возможных свойствах для родительского элемента и дочерних элементов. Это означает, что равномерно распределяет дочерние элементы внутри родительского элемента.
Модуль CSS Flexible Box
[info]Метод размещения элементов в горизонтальных или вертикальных стопках. Поддержка включает в себя все свойства с префиксом flex, а также display: flex, display: inline-flex, align-content, align-items, align-self, justify-contentи order.[/info]
HTML
Код
<div class="leguide_kaineve_savin">
<p>Начинающему вебмастеру #1</p>
<p>Начинающему вебмастеру #2</p>
<p>Начинающему вебмастеру #3</p>
</div>
CSS
Код
.leguide_kaineve_savin {
display: flex;
justify-content: space-between;
}
1. display: flex включает flexbox.
2. justify-content: space-between равномерно распределяет дочерние элементы по горизонтали. Первый элемент расположен на левом краю, а последний элемент идет на правом краю.
Кроме того, используйте justify-content: space-around для распределения детей с пространством вокруг них, а не между ними.
Демонстрация
