本文摘要
这个示例展示了如何使用CSS3的Flex布局在单行中平均分配元素的宽度。通过将容器的`display`属性设置为`flex`，并设置子元素的`flex`属性为`1`，所有子元素将等宽排列。此外，还添加了背景色、内边距和外边距以增强视觉效果。这种方法适用于需要在单行中平均分配空间的布局场景。
当使用CSS3的Flex布局来平均分配元素时，你可以将容器的`display`属性设置为`flex`，并设置`justify-content`和`align-items`（或`align-content`，如果有多行）为`center`（如果需要垂直和水平居中）或`space-between`/`space-around`/`space-evenly`来实现平均分布。
但是，如果你想在单行中平均分配元素的宽度，你可以简单地设置`flex`属性为`1`，这将使所有子元素具有相同的flex-grow因子，从而实现等宽。
以下是一个示例代码，展示了如何使用Flex布局在单行中平均分配元素的宽度：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局平均分配元素</title>
<style>
.container {
display: flex; /* 使用Flex布局 */
}
.container > div {
flex: 1; /* 设置flex-grow为1，使得所有子元素平均分配空间 */
margin: 5px; /* 可选：添加一些外边距以增加间隔 */
background-color: #ccc; /* 为了更好地看到效果，设置背景色 */
text-align: center; /* 水平居中文本（如果需要） */
padding: 10px; /* 添加一些内边距以增加视觉效果 */
box-sizing: border-box; /* 使用box-sizing: border-box; 防止元素由于边框和内边距导致宽度增加 */
}
</style>
</head>
<body>
<div>
<div>元素1</div>
<div>元素2</div>
<div>元素3</div>
<div>元素4</div>
<!-- 添加更多元素，它们也会平均分配空间 -->
</div>
</body>
</html>在这个示例中，`.container`类被应用到一个`div`元素上，该元素包含多个子`div`元素。通过设置`.container`的`display`属性为`flex`，并设置其子元素的`flex`属性为`1`，我们实现了子元素在单行中平均分配宽度的效果。每个子元素都有一个背景色、内边距和外边距，以增加视觉区分。
专题推荐：