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

Введение

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

Это Guided Lab, который предоставляет пошаговые инструкции, чтобы помочь вам учиться и практиковаться. Внимательно следуйте инструкциям, чтобы выполнить каждый шаг и получить практический опыт. Исторические данные показывают, что это лабораторная работа уровня начальный с процентом завершения 100%. Он получил 100% положительных отзывов от учащихся.

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

В ВМ уже предоставлены 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, чтобы улучшить свои навыки.