css3 flex布局實現平均分配元素的示例代碼
當使用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`，我們實現了子元素在單行中平均分配寬度的效果。每個子元素都有一個背景色、內邊距和外邊距，以增加視覺區分。
