flex是web开发中常用的布局方式,常用于移动端,通过给父标签添加display: flex属性来设置子标签的排列方式.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
div {
display: flex;
width: 800px;
background-color: pink;
}
div span {
flex: 1;
background-color: #ccc;
height: 100px;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
父标签常用属性:
1.flex-direction:设置子物体的排列方向.
默认为row,横向从左到右排列.
row-reverse:横向从右到左排列:
column:垂直从上往下排列:
column-reverse:垂直从下往上排列:
2.justify-content:设置子物体整体在当前排列方向上的排列方式.
默认flex-start,子物体在父物体左端:
flex-end:子物体在父物体右端:
center:在中间显示:
space-around:平均分配剩余空间,两端有间隔:
space-between:平均分配剩余空间,两端不留间隔:
3.flex-wrap:子物体换行方式:
默认nowrap:不换行,会压缩子物体:
wrap:换行:
wrap-reverse:换行,但是最新的一行在上边:
4.align-items:在次方向上的布局方式(单行),如果当前flex-direction为row,那么align-items决定了垂直方向上的布局:
默认flex-start:从上往下或者从左往右:
flex-end:从下往上或者从右往左:
center:居中
stretch:拉伸,注意,这种方式需要子物体在次方向上不设置长度:
5.align-content:设置次方向上子物体整体的布局方式(多行):
默认flex-start:占用父物体最上或最左部分:
flex-end:占用父物体最下或最右部分:
space-around:平均分配次方向上的空余部分,两端有间隔:
space-between:平均分配次方向上的空余部分,两端无间隔:
stretch:拉伸子物体使其平分父物体次方向的长度,注意,这种方式需要子物体在次方向上不设置长度:
6.flex-flow:flex-direction和flex-wrap的组合写法
子标签的常见属性:
1.flex:子物体所占剩余空间的份数,决定子物体的大小,如下,子物体所占份数从左到右分别为1.2.3,相当于把父物体长度分为6份,分别分配给子物体:
2.align-self:子物体在次方向上的布局方式:
默认flex-start:在左边或者上边.
flex-end:在右边或者下边,如图,设置子物体3为flex-end:
center:居中:
3.order:默认是0,设置排列顺序,如图,设置子物体3order为-1:
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
