By Ne0 — Mar 6, 2024

web开发之flex布局

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: