【CSS3】flex布局实践篇 | 7种常见网页布局方案
/* 通用样式 */
.container {
display: flex;
flex-direction: column; /* 默认为纵向排列 */
}
/* 布局一:顶部固定,底部固定,中间自适应 */
.header {
height: 50px;
background-color: lightblue;
}
.footer {
height: 50px;
background-color: lightcoral;
}
.main {
flex: 1; /* 占据剩余空间 */
background-color: lightgreen;
}
/* 布局二:侧边固定,主内容自适应 */
.sidebar {
width: 200px; /* 固定宽度 */
background-color: lightblue;
}
.content {
flex: 1; /* 占据剩余空间 */
background-color: lightgreen;
}
/* 布局三:1:2:1三等分 */
.container > div {
flex: 1;
}
/* 布局四:主内容占据一定宽度,侧边自适应 */
.main-content {
width: 80%; /* 主内容宽度 */
background-color: lightgreen;
}
.side {
flex: 1; /* 占据剩余宽度 */
background-color: lightblue;
}
/* 布局五:顶部固定,底部固定,中间1:2分配 */
.header {
height: 50px;
background-color: lightblue;
}
.footer {
height: 50px;
background-color: lightcoral;
}
.main-content {
flex: 2; /* 分配2/3空间 */
background-color: lightgreen;
}
.side {
flex: 1; /* 分配1/3空间 */
background-color: lightcoral;
}
/* 布局六:上下结构,侧边固定,主内容自适应 */
.container {
flex-direction: row; /* 改为横向排列 */
}
.sidebar {
width: 200px;
background-color: lightblue;
}
.content {
flex: 1;
background-color: lightgreen;
}
/* 布局七:上下结构,主内容占据一定宽度,侧边自适应 */
.main-content {
width: 80%;
background-color: lightgreen;
}
.side {
flex: 1;
background-color: lightblue;
}
这段代码展示了如何使用CSS Flexbox布局来创建7种常见的网页布局。每种布局都有其特定的应用场景,比如固定头尾和主内容的自适应布局,固定侧边和主内容的宽度占比布局等。通过这些实例,开发者可以快速掌握Flexbox布局的应用,提高页面布局的灵活性和可维护性。
评论已关闭