<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0
}
.wrap {
resize: both;
overflow: hidden;
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
flex-direction: column;
}
.header,
.footer,
.left,
.right {
flex: 0 0 20%;
border: 1px solid green;
box-sizing: border-box;
}
.contain {
flex: 1 1 auto;
display: flex;
}
.center {
flex: 1 1 auto;
弹性盒实现圣杯布局
最新推荐文章于 2023-08-23 19:18:37 发布
本文详细介绍了如何利用弹性盒模型(Flexbox)来实现经典的圣杯布局,通过设置容器的display属性和子元素的flex属性,实现了内容区域居中,两侧侧边栏固定宽度且并排显示的效果。这种方法避免了传统的CSS Hack和负margin,使得布局更加简洁易维护。
摘要由CSDN通过智能技术生成