flex布局具有便捷、灵活的特点,熟练的运用flex布局能解决大部分布局问题,这里对一些常用布局场景做一些总结。
web页面布局(topbar + main + footbar)
示例代码
要实现的效果如下:
html代码:
<div class="container">
<header>header...</header>
<main>内容</main>
<footer>footer...</footer>
</div>
css代码:
header{
height:100px;
background:#ccc;
}
footer{
height:100px;
background:#ccc;
}
.container{
display:flex;
flex-direction:column;
height:100vh;
}
main{
flex-grow:1;
}
应用的flex属性
本例中主要应用了以下flex属性:
- flex-direction:column 使整体布局从上到下排列
- flex-grow:1, 应用于main,使得main自动填充剩余空间
本例中应用以较少的css代码实现了传统的上中下页面布局,其中的关键通过flex-grow的使用避免了当main内容过少时footer部分会被提升到页面上方的问题(传统方式上可能需要靠绝对定位来解决了~)
每行的项目数固定并自动换行的列表项
要实现的效果如下:
html代码:
示例代码
css代码:
ul{
display:flex;
flex-wrap:wrap;
}
li{
list-style:none;
flex:0 0 25%;
background:#ddd;
height:100px;
border:1px solid red;
}
应用的flex属性
本例中主要应用了以下flex属性:
-
flex:0 0 25%,相当于flex-basis:25%,使得每一个列表项的宽度占外层容器(本例中的ul元素)的25%,因此每行最多能够排开四个列表项。
-
flex-wrap:wrap,使得每行填满时会自动换行
实现自动划分多余空间的列表项
本例的效果和上例中的图2很相似,只是每行为3个固定宽度的列表项,并且各列表项之间留有相同宽度的空隙