弹性布局–flex
(一)视口单位主要包括以下4个:
- vw:1vw等于视口宽度的1%
- vh:1vh等于视口高度的1%
- vmin:选取vm和vh中最小的那个
- vmax:选取vm和vh中最大的那个
常用于手机端
(二)概述
设为flex布局以后,子元素的float、clear和vertical-align属性将失效;所有脱离文档流的元素,flex也失效
(三)声明
使用display属性声明flex
display:flex;
display:inline-flex;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
footer{
display: flex;
height: 80px;
background-color:#8a8c8e;
}
footer div{
color: #FFF;
}
</style>
</head>
<body>
<footer>
<div>最新日期</div>
<div>联系我们</div>
<div>往期文章</div>
<div>更新日期</div>
</footer>
</body>
</html>
(四)flex容器属性
1.flex-direction属性决定主轴方向
row:默认主轴为水平方向,起点在左端
row-reverse:主轴为水平方向,起点在右端
column:主轴为垂直方向,起点在上端
column-reserve:主轴为垂直方向,起点在下端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
footer{
display: flex;
/*flex-direction: row-reverse;*/
/*flex-direction: column;*/
flex-direction: column-reverse;
width: 600px;
border: solid 1px red;
}
footer div{
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
background-color: green;
color: #FFF;
}
</style>
</head>
<body>
<footer>
<div>最新日期</div>
<div>联系我们</div>
<div>往期文章</div>
<div>更新日期</div>
</footer>
</body>
</html>
2.flex-wrap
nowrap:默认不换行
wrap:换行,第一行元素在后面元素的上方
wrap-reserve:换行,第一行元素在后面元素的下方
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
footer{
display: flex;
flex-wrap:wrap;
flex-direction: column-reverse;
width: 200px;
height:600;//设置高度会自适应
border: solid 1px red;
}
footer div{
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
background-color: green;
color: #FFF;
}
</style>
</head>
<body>
<footer>
<div>最新日期</div>
<div>联系我们</div>
<div>往期文章</div>
<div>更新日期</div>
</footer>
</body>
</html>
3.flex-flow(组合)
flex-flow是flex-direction和flex-wrap组合,默认值:row nowrap;
4.justify-content(主轴方向)
flex-start:默认值,主轴起点对齐
flex-end:主轴终点对齐
center:居中
space-between:两端对齐的间隔相等
space-around:每个元素的间隔相等,最前、最后元素跟边框的距离是中间元素之间距离的一半
space-evenly:每个元素之间、元素与边界之间的距离全部平均分配,但兼容性较低
5.align-items(交叉轴)
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
center:交叉的中点居中
baseline:元素第一第一行文字的基线对齐
strech:轴线占满整个交叉轴
6.align-content(多个主轴的对齐方式)
如果元素只有一根轴,该属性不起作用
flex-start:交叉轴起点对齐
flex-end:交叉轴终点对齐
center:交叉的中点居中
space-between:交叉轴两端对齐的间隔相等
space-around:每根轴线两侧间隔相等
space-evenly:元素平均分配
strech:默认值,轴线占满整个交叉轴
(五)flex元素属性
- 不能使用float与clear规则
- 弹性元素均为块级元素//可以设置宽高
- 绝对定位的弹性元素不参与弹性布局
1.align-self:设置单个元素的对齐方式,可覆盖align-items属性
默认值auto
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
footer{
display: flex;
align-content: center;
width: 600px;
height: 300px;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
border: solid 1px red;
}
footer div{
width: 100px;
height: 100px;
margin: 10px;
text-align: center;
line-height: 100px;
background-color: green;
color: #FFF;
}
footer div:first-child{
align-self: flex-start;
}
footer div:last-child{
align-self: flex-end;
}
</style>
</head>
<body>
<footer>
<div>最新日期</div>
<div>联系我们</div>
<div>往期文章</div>
<div>更新日期</div>
</footer>
</body>
</html>
2.flex-grow
元素放大的比例,默认0,即存在剩余空间,也不放大
1.如果所以元素为1,则将剩余空间等分(权重大于宽高)
2.如果所以元素为1,则将剩余空间等分,有一个为0,则0那个保持原样
3.flex-shrink缩小,默认值为1
4.flex-basis
属性定义在分配多余空间之前,元素占据的主轴空间,浏览器根据这个属性,计算轴是否有多余空间,默认值为auto,权重大于宽高
5.flex(组合)
是flex-grow,flex-shrink,flex-basis组合,默认值 0 1 auto,后两个可选
6.order:排列顺序,值越大越靠后