前言:弹性盒模型的出现使得前端的布局更简单,更快捷,更灵活。(反正很好用就对了)。
一、flex的浏览器内核兼容写法
{
display:-webkit-flex;
display:-moz-box;
display:-mz-flexbox;
display:flex;
}
二、容器上的六个属性、容器内的子项目上的六个属性
①、容器上的六个属性:
flex-direction: 决定子项目主轴的方向(默认值为row)
flex-wrap: 决定子项目是否换行(默认值是不换行nowrap)
flex-flow: direction wrap的合并写法
justify-content: 决定子项目(水平)横向布局方式(默认值flex-start)
align-items: 决定子项目(垂直)纵向布局方式(默认值stretch)
align-content: 子项目有多列时,决定子项目的纵向布局方式(默认值flex-start)
②、容器内的子项目的六个属性:
order: 设置子项目的顺序(默认为0)
flex-grow: 子项目是否可扩大(默认为0,不扩大)
flex-shrink: 子项目是否可缩小(默认为1,可缩小)(0是false,1是true)
flex-basis: 设置子项目的初始宽度(默认为auto)
flex: grow、shrink、basis合并
align-self: 设置子项目(垂直)纵向方向的位置(默认值stretch)
三、容器上的六个属性
①、flex-direction: 决定子项目主轴的方向(默认值为row)
<body>
<style>
.box { width:100%; height:50px; border:1px solid #000; margin-bottom:20px;
display:-webkit-flex; display:flex; }
.box div { width:50px; height:50px; line-height:50px; text-align:center;
background:#ccc; }
.row { flex-direction:row; }
.row-reverse { flex-direction:row-reverse; }
.column { flex-direction:column; margin-bottom:100px;}
.column-reverse { flex-direction:column-reverse; }
</style>
<div class="box row">
<div>1</div><div>2</div>
</div>
<div class="box row-reverse">
<div>1</div><div>2</div>
</div>
<div class="box column">
<div>1</div><div>2</div>
</div>
<div class="box column-reverse">
<div>1</div><div>2</div>
</div>
</body>
运行结果:
其实很好记,direction的中文意思是"方向",而row的中文意思是"行",column的中文意思是"列",reverse的中文意思是"颠倒"。这样就很容易理解,也很容易记住了。
②、flex-wrap: 决定子项目是否换行(默认值是不换行nowrap)
<body>
<style>
.box { width:100%; height:100px; border:1px solid #000; margin-bottom:20px;
display:-webkit-flex; display:flex; }
.box div { width:400px; height:50px; line-height:50px; text-align:center;
background:#ccc; }
.nowrap { flex-wrap:nowrap; }
.wrap { flex-wrap:wrap; }
.wrap-reverse { flex-wrap:wrap-reverse; }
</style>
<div class="box nowrap">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box wrap">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box wrap-reverse">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>
运行结果:
同样的wrap的意思是换行,而nowrap的意思是不换行。而wrap-reverse颠倒换行。从运行结果中可看出来,当容器宽度小于容器中子项目的宽度总和的时候,如果设置为nowrap不换行子项目会默认进行宽度缩小。
③、flex-flow: direction wrap的合并写法
flex-flow就不多说了,他就是direction,wrap的合并。
比如
flex-flow:row nowrap; 等价于
flex-direction:row; flex-wrap:nowrap;
④、决定子项目(水平)横向布局方式(默认值flex-start)
<style>
.box { width:100%; height:50px; border:1px solid #000; margin-bottom:20px;
display:-webkit-flex; display:flex; }
.box div { width:50px; height:50px; line-height:50px; text-align:center;
background:#ccc; }
.flex-start { justify-content:flex-start; }
.flex-end { justify-content:flex-end; }
.center { justify-content:center; }
.space-between { justify-content:space-between; }
.space-around { justify-content:space-around; }
</style>
<div class="box flex-start">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box flex-end">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box center">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box space-between">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box space-around">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>
运行结果:
从字面意思上去理解记住justify的值会更好, flex-start,flex-end,center就不多说了。space-between就是剩余的空间在子项目中平均分布,space-around就是剩余空间会围绕着子项目平均分布。
⑤、align-items: 决定子项目(垂直)纵向布局方式(默认值stretch)
<body>
<style>
.box { width:100%; height:100px; border:1px solid #000; margin-bottom:20px;
display:-webkit-flex; display:flex; }
.box div { width:50px; line-height:50px; text-align:center; background:#ccc; }
.box div:nth-of-type(1) { height:50px; font-size:15px;}
.box div:nth-of-type(2) { height:60px; font-size:20px;}
.box div:nth-of-type(3) { height:70px; font-size:26px;}
.box div:nth-of-type(4) { height:80px; font-size:32px;}
/*stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。*/
.stretch { align-items:stretch; }
.flex-start { align-items:flex-start; }
.flex-end { align-items:flex-end; }
.center { align-items:center; }
.baseline { align-items:baseline; }
/*baseline 项目的第一行文字的基线对齐*/
</style>
<div class="box stretch">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="box flex-start">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box flex-end">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box center">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box baseline">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>
运行结果:
这里的flex-start,flex-end,center也就不多说了。 重点说下stretch,baseline。stretch是默认值(如果项目未设置高度或设为auto,将占满整个容器的高度。baseline是项目的根据第一行文字的基线对齐。看上图中的第一个跟最后一个就明白了。
⑥、align-content: 子项目有多列时,决定子项目的纵向布局方式(默认值flex-start),align-content要flex-wrap:wrap; 进行换行配合着使用。
<body>
<style>
.box { width:600px; height:100px; border:1px solid #000; margin-bottom:20px;
display:-webkit-flex; display:flex; }
.box div { width:600px; height:25px; line-height:25px; text-align:center;
background:#ccc; }
.flex-start { align-content:flex-start; flex-wrap:wrap; }
.flex-end { align-content:flex-end; flex-wrap:wrap; }
.center { align-content:center; flex-wrap:wrap;}
.space-between { align-content:space-between; flex-wrap:wrap;}
.space-around { align-content:space-around; flex-wrap:wrap;}
.stretch { align-content:stretch; flex-wrap:wrap; }
</style>
<div class="box flex-start">
<div>1</div><div>2</div><div>3</div>
</div>
<div class="box flex-end">
<div>1</div><div>2</div><div>3</div>
</div>
<div class="box center">
<div>1</div><div>2</div><div>3</div>
</div>
<div class="box space-between">
<div>1</div><div>2</div><div>3</div>
</div>
<div class="box space-around">
<div>1</div><div>2</div><div>3</div>
</div>
<div class="box stretch">
<div>1</div><div>2</div><div>3</div>
</div>
</body>
运行结果:
align-content的前五个值都是跟justify-content是一样效果,但是align-content:stretch;该值是justify-content没有的。他的效果是剩余空间在子项目的bottom下面进行平均分布。
三、容器内的子项目的六个属性
①、order: 设置子项目的顺序(默认为0)
<body>
<style>
.box { width:100%; height:100px; border:1px solid #000; margin-bottom:20px;
display:-webkit-flex; display:flex; }
.box div { width:50px; height:50px; line-height:50px; text-align:center;
background:#ccc; }
/*order默认为0*/
.box div:nth-of-type(1) { }
.box div:nth-of-type(2) { order:-1; }
.box div:nth-of-type(3) { order:-2; }
.box div:nth-of-type(4) { order:2; }
.box div:nth-of-type(5) { order:1; }
</style>
<div class="box">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
</body>
运行结果:
②、flex-grow: 子项目是否可扩大(默认为0,不扩大)
<body>
<style>
.box,.box2,.box3 { width:100%; height:100px; border:1px solid #000;
margin-bottom:20px; display:-webkit-flex; display:flex; }
.box div,.box2 div,.box3 div { width:50px; height:50px; line-height:50px;
text-align:center; background:#ccc; }
/*默认为0*/
/*等分*/
.box2 div:nth-of-type(1) { flex-grow:1; }
.box2 div:nth-of-type(2) { flex-grow:1; }
.box2 div:nth-of-type(3) { flex-grow:1; }
.box2 div:nth-of-type(4) { flex-grow:1; }
/*所有子项目flex-grow值的总和 1+2+3+4=10*/
.box3 div:nth-of-type(1) { flex-grow:1; } /*10分之1*/
.box3 div:nth-of-type(2) { flex-grow:2; } /*10分之2*/
.box3 div:nth-of-type(3) { flex-grow:3; } /*10分之3*/
.box3 div:nth-of-type(4) { flex-grow:4; } /*10分之4*/
</style>
<div class="box">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box2">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box3">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>
运行结果:
求一个子项目占容器的百分比用 该子项目flex-grow的值/容器所有子项目flex-grow值的总和。
③、flex-shrink: 子项目是否可缩小(默认为1,可缩小)(0是false,1是true)
<body>
<style>
.box,.box2,.box3 { width:400px; height:100px; border:1px solid #000;
margin-bottom:20px; display:-webkit-flex; display:flex; }
.box div,.box2 div,.box3 div { width:200px; height:50px; line-height:50px;
text-align:center; background:#ccc; }
/*默认为1,为0的不可缩小,值为1可缩小*/
.box2 div:nth-of-type(1) { flex-shrink:0; }
.box2 div:nth-of-type(2) { flex-shrink:0; }
.box2 div:nth-of-type(3) { flex-shrink:0; }
.box2 div:nth-of-type(4) { flex-shrink:0; }
.box3 div:nth-of-type(1) { flex-shrink:1; }
.box3 div:nth-of-type(2) { flex-shrink:0; }
.box3 div:nth-of-type(3) { flex-shrink:0; }
.box3 div:nth-of-type(4) { flex-shrink:1; }
</style>
<div class="box">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box2">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box3">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>
运行结果:
如果没设置换行并且flex-shrink设置为0的话,子项目就不可根据容器缩小了,而且超出部分会撑出到容器外。子项目部分设置flex-shrink:0;的话,那些设置了的也不会进行缩小,当容器小于一定程度后,超出部分也会撑出到容器外。
④、flex-basis: 设置子项目的初始宽度(默认为auto)
<body>
<style>
.box,.box2{ width:100%; height:100px; border:1px solid #000; margin-bottom:20px;
display:-webkit-flex; display:flex; }
.box div,.box2 div{ width:200px; height:50px; line-height:50px;
text-align:center; background:#ccc; }
.box div:nth-of-type(1) { width:400px; }
.box div:nth-of-type(2) { width:300px; }
.box div:nth-of-type(3) { flex-basis:auto; }
.box div:nth-of-type(4) { flex-basis:auto; }
.box2 div:nth-of-type(1) { flex-basis:400px; }
.box2 div:nth-of-type(2) { flex-basis:300px; }
.box2 div:nth-of-type(3) { flex-basis:auto; }
.box2 div:nth-of-type(4) { flex-basis:auto; }
</style>
<div class="box">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="box2">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
</body>
运行结果:
basis的默认值为auto,即子项目的本来大小。像上面代码中,给子项目设置width:300px;跟给子项目设置basis:300px;的效果是一样的。
⑤、flex: grow、shrink、basis合并
flex也不多说,就是grow、shrink、basis的合并。
要说的是,flex有两个特殊值:auto、none
{ flex:auto; }
等价于
{ flex-grow:1; flex-shrink:1; flex-basis:auto; }
{ flex:none; }
等价于
{ flex-grow:0; flex-shrink:0; flex-basis:auto; }
⑥、align-self: 设置子项目(垂直)纵向方向的位置(默认值auto)
<body>
<style>
.box { width:100%; height:100px; border:1px solid #000; margin-bottom:20px;
display:-webkit-flex; display:flex; }
.box div { width:50px; height:50px; line-height:50px; text-align:center;
background:#ccc; }
.box div:nth-of-type(1) { align-self:stretch; }
.box div:nth-of-type(2) { align-self:flex-start; }
.box div:nth-of-type(3) { align-self:center; }
.box div:nth-of-type(4) { align-self:flex-end; }
.box div:nth-of-type(5) { align-self:baseline; }
</style>
<div class="box row">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖容器的align-items属性。slign-self默认值为auto,表示继承容器的align-items属性,如果容器没有设置align-items的值,等同于继承了stretch。(align-items的默认值为stretch)