均匀分布子元素：精通 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。

要在父元素内均匀分布子元素，请使用弹性盒布局，将父元素的 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 中练习更多实验来提升你的技能。