CSS使用flex弹性盒子保持容器平均分
warning:
这篇文章距离上次修改已过275天，其中的内容可能已经有所变动。
在CSS中，使用flex弹性盒子模型可以轻松地保持容器内的项目均匀分布。以下是一个简单的例子，演示如何使用flexbox来保持容器内的项目平均分布：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Average Split</title>
<style>
.container {
display: flex;
justify-content: space-around;
width: 100%;
height: 100px;
background-color: #f0f0f0;
}
.item {
flex: 1;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>在这个例子中，.container 类使用了 display: flex 来声明一个flex容器。.item 类使用了 flex: 1 来确保所有子项均匀分配容器的空间。justify-content: space-around 则用于确保子项在容器中均匀分布，并且两端对齐。
评论已关闭