参考:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
下面代码可能会比较多,但核心CSS代码已经用 /**/
的标记标出,直接看核心代码就好。
一、网格布局
1、基本网格布局
最简单的网格布局,就是平均分布。在容器里面平均分配空间即可(flex:1
)
注:flex:1 等价于 flex: 1 1 0%;
flex: 1 1 0%; 等价于 flex-grow:1; flex-shrink:1; flex-basic:0;
<style type="text/css">
.grid{
display: flex; /*1*/
}
.grid-cell{
flex:1; /*2*/
border: 1px solid red;
height: 30px;
margin: 10px 15px;
}
.larger-height{
height: 200px;
}
</style>
<div class="grid">
<div class="grid-cell">1/2</div>
<div class="grid-cell">1/2</div>
</div>
<div class="grid">
<div class="grid-cell">1/3</div>
<div class="grid-cell">1/3</div>
<div class="grid-cell">1/3</div>
</div>
<div class="grid">
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
<div class="grid-cell">1/4</div>
</div>
<div class="grid">
<div class="grid-cell larger-height">Woohoo!</div>
<div class="grid-cell larger-height">dasdasd sdsscdasd asadasd</div>
</div>
2、百分比布局
某个网格的宽度为固定的百分比(如下图的1/2、1/3、1/4),其余网格平均分配剩余的空间。
<style type="text/css">
.grid{
display: flex; /*1*/
}
.grid-cell{
flex:1; /*2*/
border: 1px solid red;
height: 30px;
margin: 10px 15px;
text-align: center;
}
.u-1of2{
flex:0 0 50%; /*3*/
}
.u-1of3{
flex:0 0 33.3333%; /*4*/
}
.u-1of4{
flex:0 0 25%; /*5*/
}
</style>
<div class="grid">
<div class="grid-cell u-1of2">1/2</div>
<div class="grid-cell">auto</div>
<div class="grid-cell">auto</div>
</div>
<div class="grid">
<div class="grid-cell">auto</div>
<div class="grid-cell u-1of3">1/3</div>
</div>
<div class="grid">
<div class="grid-cell u-1of4">1/4</div>
<div class="grid-cell">auto</div>
<div class="grid-cell u-1of3">1/3</div>
</div>
二、圣杯布局
圣杯布局(Holy Grail Layout)指的是一种最常见的网站布局。页面从上到下,分成三个部分:头部(header),躯干(body),尾部(footer)。其中躯干又水平分成三栏,从左到右为:导航、主栏、副栏。
<style type="text/css">
.box{
display: flex; /*1*/
flex-direction: column; /*2*/
}
.box-body{
margin: 10px 0;
height: 200px;
display: flex; /*3*/
}
.box-content{
flex: 1; /*4*/
margin: 0px 10px;
}
.box-nav,
.box-ads{
/* (nav,ads)两个边栏的宽度设为12em */
flex: 0 0 12em; /*5*/
}
.box-nav{
/* 导航放到最左边 */
order: -1; /*6*/
}
.box header,
.box footer,
.box-content,
.box-nav,
.box-ads{
border: 1px solid red;
}
</style>
<div class="box">
<header>header</header>
<div class="box-body">
<div class="box-content">content</div>
<div class="box-nav">nav</div>
<div class="box-ads">ads</div>
</div>
<footer>footer</footer>
</div>
三、输入框的布局
我们常常需要在输入框的前方添加提示,后方添加按钮。
<style type="text/css">
.input {
display: flex; /*1*/
}
.input-field {
flex: 1; /*2*/
}
.input-item{
border:1px solid gray;
}
</style>
<div class="input">
<span class="input-item">icon</span>
<input class="input-field">
<button class="input-item">btn</button>
</div>
四、悬挂式布局
有时,主栏的左侧或右侧,需要添加一个图片栏。也可以理解成类似于微信聊天的场景:左边或右边为头像,另一边为文字内容。
这里就不举例子了,直接上核心代码,大家实际场景举一反三即可:
(头像在左,内容在右)
<style type="text/css">
.Media {
display: flex; /*1*/
align-items: flex-start; /*2*/
}
.Media-figure {
margin-right: 1em;
}
.Media-body {
flex: 1; /*3*/
}
</style>
<div class="Media">
<img class="Media-figure" src="" alt="">
<p class="Media-body">...</p>
</div>
五、固定的底栏
有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。
为了方便演示,我们就做成这样:
<style type="text/css">
.site{
display: flex; /*1*/
flex-direction: column; /*2*/
min-height: 30vh; /*3*/
border: 1px solid yellow;
}
.site-content {
flex: 1; /*4*/
}
.site header,
.site main,
.site footer{
border: 1px solid red;
}
</style>
<div class="site">
<header>header</header>
<main class="site-content">main </main>
<footer>footer</footer>
</div>
如果我们去掉.site-content {flex:1}呢?
就会变成下面这样,main变矮了。
六、流式布局
每行的项目数固定,会自动分行。
注:实际场景中,由于会给.item加border,所以很容易让item溢出box;所以我们这里采用IE盒模型( box-sizing: border-box;)来避免该情况发生。
<style type="text/css">
.box {
width: 200px;
height: 150px;
background-color: black;
display: flex; /*2*/
flex-flow: row wrap; /*4*/
}
.item {
box-sizing: border-box; /*1*/
background-color: white;
flex: 0 0 25%; /*3*/
height: 50px;
border: 1px solid red;
}
</style>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>