Равномерно распределенные дочерние элементы: мастерство CSS

Введение

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/AdvancedLayoutGroup(["Advanced Layout"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/AdvancedLayoutGroup -.-> css/flexbox("Flexbox") subgraph Lab Skills css/selectors -.-> lab-35196{{"Равномерно распределенные дочерние элементы"}} css/display_property -.-> lab-35196{{"Равномерно распределенные дочерние элементы"}} css/flexbox -.-> lab-35196{{"Равномерно распределенные дочерние элементы"}} end

Равномерно распределенные дочерние элементы

В ВМ уже предоставлены index.html и style.css.

Для равномерного распределения дочерних элементов внутри родительского элемента используйте макет flexbox, установив для свойства display родительского элемента значение flex. Для горизонтального распределения дочерних элементов с равным расстоянием между ними используйте justify-content: space-between. Для распределения дочерних элементов с расстоянием вокруг них используйте justify-content: space-around. Вот пример:

<div class="evenly-distributed-children">
  <p>Item1</p>
  <p>Item2</p>
  <p>Item3</p>
</div>

.evenly-distributed-children {
  display: flex;
  justify-content: space-between;
}

Пожалуйста, нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

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