flex布局+flex进行盒子居中+伸缩比+圣杯布局
以下是使用Flexbox进行布局，并结合Flex属性实现盒子居中、伸缩比和圣杯布局的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout Example</title>
<style>
.container {
display: flex; /* 使用Flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 容器高度为视口高度 */
}
.box {
flex: 1; /* 设置Flex伸缩比为1 */
text-align: center; /* 文字居中 */
padding: 20px; /* 内边距 */
color: white; /* 文字颜色 */
}
.box-spacer {
flex: 1; /* 设置Flex伸缩比为1 */
}
.box-left {
background-color: #3498db; /* 左边盒子背景颜色 */
}
.box-middle {
background-color: #e74c3c; /* 中间盒子背景颜色 */
}
.box-right {
background-color: #f1c40f; /* 右边盒子背景颜色 */
}
</style>
</head>
<body>
<div class="container">
<div class="box box-left">左边盒子</div>
<div class="box-spacer"></div>
<div class="box box-middle">中间盒子</div>
<div class="box-spacer"></div>
<div class="box box-right">右边盒子</div>
</div>
</body>
</html>这段代码会创建一个简单的圣杯布局，其中.container是一个Flex容器，它水平和垂直居中三个.box盒子，以及两个空的.box-spacer用于均匀分散空间。每个盒子通过flex: 1获得相等的伸缩比，从而平分可用空间。通过调整background-color属性，三个盒子显示不同的颜色，形成了圣杯布局的效果。
评论已关闭