等高布局
之前我们实现等高布局的方式通常是使用非常大的padding-bottom与负的margin-bottom,而使用flex也能轻松实现。
由于align-items属性的默认值是stretch,也就是子项目会默认伸展来填满容器。
因此当我们设置了容器的height,或者某一子项目的height撑开了容器,那么所有子项目默认都会stretch成容器的高度,从而实现等高。
n栏布局(grid布局)
一般都是使用float实现,但针对栏数总要更改宽度等参数,使用flex就比较方便:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container{
display:flex;
}
.item{
flex:1;
}
这样就完成了,而且再增加或者减少栏数直接修改html结构即可:
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
css根本不用改任何东西:
带有样式的完整代码:
.container{
display:flex;
background-color:#eee;
padding:20px;
}
.item{
flex:1;
height:200px;
background-color:#fff;
margin-right:20px;
}
圣杯布局
先上一个最终效果图:
用flex实现的话,首先可以观察到其实是有两部分需要使用flex来布局的,一是整体布局,从上而下的:
另一个是中间内容区,分成三栏,左右两栏宽度固定,中间是自适应的,这三栏又是一个flex布局:
因此中间的部分其实既作为整体布局的item,也是内部三栏布局的容器。
具体代码:
<body >
<header> Header </header>
<div class="container">
<main class="content"></main>
<nav class="nav"></nav>
<aside class="ads"></aside>
</div>
<footer> Footer </footer>
</body>
首先是外层flex布局,从上至下的,因此要设置flex-direction
body{
display:flex;
flex-direction:column;
}
而针对中间部分的三栏布局,也要声明另一个flex容器:
.container{
display:flex;
}
然后实现中间自适应,左右两边固定宽度:
.container .content{
flex:1;
}
.container .nav{
flex:0 0 200px;
order:-1;
}
.container .ads{
flex:0 0 300px;
}
下一步,其实圣杯布局是可以实现响应式的,就是在小分辨率下改为由上到下排列显示:
这里就要更改一下container的flex-direction属性了:
@media (max-width: 768px){
.container{
flex-direction:column;
}
}
垂直水平居中
flex应该是解决这个问题的最优雅的方式。
.container{
display:flex;
justify-content:center;
align-items:center
}
容器内的项目甚至都不用做任何配置,也不用知道元素的大小。