莫克力学习博客

flex布局

关于弹性布局， 09年规定的是display:box;并且每个浏览器要加自己的前缀。到12年规定的是用display:flex;,但是现在display:box与display:flex都可以用，浏览器都可以识别，这篇文章主要就将flex了，毕竟新规范嘛。

弹性布局可以对子元素的对齐方式，空余空间，控制。不相等比例，弹性方框分组改变子元素排列方向，顺序，对齐，同轴对齐，多行或者多列。

首先，任何一个块级容器都可以指定为Flex布局。

1
2
3
.box{
  display: flex;
}

行内元素也可以使用Flex布局。

1
2
3
.box{
  display: inline-flex;
}

各个浏览器最好都加上自己的前缀，最后没有前缀的写后面。

1
2
3
4
5
6
7
.box {
	display: -o-flex;
	display: -ms-flex;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
}

基本概念

我们把外面的Flex容器，简称”容器”。把里面子元素称为Flex项目，简称”项目”。

容器的属性

容器共有6个属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

flex-direction属性

flex-direction属性决定主轴的方向（即项目的排列方向）。
它有4个值：

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。
    flex-direction

flex-wrap属性

flex-wrap属性定义，如果一条轴线排不下，如何换行。
它有3个值：

  • nowrap（默认）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。就是把二者写在一块。

1
2
3
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content属性

justify-content属性定义了项目在水平上的对齐方式。
它有5个值：

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性

align-items属性定义项目在垂直上如何对齐。
也是5个值：

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性

align-content属性定义了如果项目有多行，垂直方向上的对齐方式。
有6个值：

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

刚才说的都是容器的属性，那么下面说一下项目的属性

项目的属性

项目的属性有6个：

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0

flex-shrink属性

该属性与flex-grow属性刚好相反，flex-shrink属性定义了项目的缩小比例，默认为1

flex-basis属性

flex-basis属性定义了在分配多余空间之前（水平方向），可以设置为具体的像素

flex属性

这应该是用的最多的项目属性了，可以指定0,1，auto或其他数值。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
其6个属性值，除了auto，其他和align-items一样

  • auto
  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

这里是一个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body, html {
			margin: 0;
			padding: 0;
		}
		.wrap {
			margin: 50px auto;
			width: 60%;
			height: 50%;
			border: 1px solid #111;
			display: -webkit-flex;
			display: flex;
			-webkit-justify-content: center;
			justify-content: space-around;
			-webkit-align-items: center;
			align-items: center;
			-webkit-flex-direction: column;
			flex-direction: row;
		}
		.item {
			height: 100px;
			text-align: center;
			line-height: 100px;
		}
		.item1 {
			background-color: red;
			-webkit-flex: 1;
			flex: 1; 
			width: 50px;
			-webkit-order: 1;
			order: 1;
		}
		.item2 {
			background-color: green;
			width: 100px;
			height: 30px;
			-webkit-order: 2;
			order: 2;
			flex-grow: 1;
		}
		.item3 {
			background-color: blue;
			-webkit-flex: 3;
			flex: 3; 
			width: 140px;
			-webkit-order: 0;
			order: 0; 
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="item item1">1</div>
		<div class="item item2">2</div>
		<div class="item item3">3</div>
	</div>
</body>
</html>

详情请参考阮一峰网络日志