引言
flex为flexible box的缩写,即弹性布局,利用flex可以对网页进行灵活的布局
一个简单的例子
<html>
<head>
<meta charset="utf-8">
<title>flex弹性布局</title>
<style type="text/css">
.box{
height:400px;
width:500px;
display:flex;
}
.firstbox{
flex:1;
background-color:#eee;
}
.secondbox{
flex:2;
background-color:#eef;
}
.thirdbox{
flex:3;
background-color:#fee;
}
</style>
</head>
<body>
<div class="box">
<div class="firstbox"></div>
<div class="secondbox"></div>
<div class="thirdbox"></div>
</div>
</body>
</html>
简单来说就是按比例分配父元素的空间
注意:设为flex属性后,子元素的float,clear,vertical-align属性都将失效
flex的六个属性:
1.flex-direction
2.flex-wrap
3.flex-flow
4.justify-content
5.align-iterms
6.align-content
一.flex-direction
该属性确定了子元素的排列方向
该属性有四个取值:
row(默认值):水平方向自左向右排列
row-reverse:水平方向自由向左排列
column:垂直方向自上而下
column-reverse:垂直方向自下而上
<html>
<head>
<meta charset="utf-8">
<title>flex弹性布局</title>
<style type="text/css">
.box{
height:400px;
width:500px;
display:flex;
flex-direction:row-reverse;
}
.firstbox{
flex:1;
background-color:#eee;
}
.secondbox{
flex:2;
background-color:#eef;
}
.thirdbox{
flex:3;
background-color:#fee;
}
</style>
</head>
<body>
<div class="box">
<div class="firstbox">一号div框</div>
<div class="secondbox">二号div框</div>
<div class="thirdbox">三号div框</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>flex弹性布局</title>
<style type="text/css">
.box{
height:400px;
width:500px;
display:flex;
flex-direction:column;
}
.firstbox{
flex:1;
background-color:#eee;
}
.secondbox{
flex:2;
background-color:#eef;
}
.thirdbox{
flex:3;
background-color:#fee;
}
</style>
</head>
<body>
<div class="box">
<div class="firstbox">一号div框</div>
<div class="secondbox">二号div框</div>
<div class="thirdbox">三号div框</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>flex弹性布局</title>
<style type="text/css">
.box{
height:400px;
width:500px;
display:flex;
flex-direction:row-reverse;
}
.firstbox{
flex:1;
background-color:#eee;
}
.secondbox{
flex:2;
background-color:#eef;
}
.thirdbox{
flex:3;
background-color:#fee;
}
</style>
</head>
<body>
<div class="box">
<div class="firstbox">一号div框</div>
<div class="secondbox">二号div框</div>
<div class="thirdbox">三号div框</div>
</div>
</body>
</html>
二.flex-wrap
该属性定义了如果一条轴线上放不下如何换行
该属性有三个取值:
nowrap(默热):不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
<pre name="code" class="html"><html>
<head>
<meta charset="utf-8">
<title>flex弹性布局</title>
<style type="text/css">
.box{
height:400px;
width:500px;
display:flex;
flex-wrap:wrap;
}
.firstbox{
width:200px;
height:200px;
background-color:#eee;
}
.secondbox{
width:200px;
height:200px;
background-color:#eef;
}
.thirdbox{
width:200px;
height:200px;
background-color:#fee;
}
</style>
</head>
<body>
<div class="box">
<div class="firstbox">一号div框</div>
<div class="secondbox">二号div框</div>
<div class="thirdbox">三号div框</div>
</div>
</body>
</html>
当属性值改变为wrap-reverse时,效果如下图所示
三.flex-flow
该属性为flex-direction属性和flex-wrap属性的简写方式
.box{
flex-flow:row nowrap;
}
四.justify-content
该属性定义了子元素在轴向上的对齐方式
取值:flex-start flex-end center space-between space-around
<html>
<head>
<meta charset="utf-8">
<title>flex弹性布局</title>
<style type="text/css">
.box{
height:400px;
width:500px;
display:flex;
justify-content:flex-start;
}
.firstbox{
width:100px;
height:200px;
background-color:#eee;
}
.secondbox{
width:100px;
height:200px;
background-color:#eef;
}
.thirdbox{
width:100px;
height:200px;
background-color:#fee;
}
</style>
</head>
<body>
<div class="box">
<div class="firstbox">一号div框</div>
<div class="secondbox">二号div框</div>
<div class="thirdbox">三号div框</div>
</div>
</body>
</html>
属性修改为flex-eng时的情形
属性修改为center时的情形
属性修改为space-between时
属性修改为space-around时
五.align-items
取值说明:
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
六.align-content
取值说明:
flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐
center:与交叉轴的中点对齐
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
stretch(默认值):轴线占满整个交叉轴