【CSS】flex弹性盒保持均分
要使用CSS的flex布局使子元素均分父容器的空间,可以将父容器设置为display: flex;
,然后将子元素的flex
属性设置为1
或者相等的值。这样,所有子元素会自动平均分配父容器的空间。
以下是实现这种布局的示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex 均分示例</title>
<style>
.flex-container {
display: flex; /* 设置flex布局 */
}
.flex-item {
flex: 1; /* 所有子元素均分父容器的空间 */
text-align: center;
border: 1px solid #000;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
在这个例子中,.flex-container
是一个flex容器,其中的 .flex-item
是子元素。每个子元素都通过设置flex: 1;
均分了父容器的空间。
评论已关闭