关于flexbox布局

发表于 | 分类于 | | 本文总阅读量 次

felxbox布局

1、伸缩容器属性

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

1.1 display

该属性用来指定元素是否为伸缩元素容器，其语法为：

1
display: flex | inline-flex

HTML代码为：

1
<span class="flex-container"></sapn>
  • flex：这个值用于产生块级伸缩容器，示例CSS代码如下：
1
2
3
.flex-container {
	display: flex;
}
  • inline-flex：这个值用于产生行内级伸缩容器，示例CSS代码如下：
1
2
3
.flex-container {
	display: inline-flex;
}

1.2 flex-direction

该属性用于指定主轴方向，其语法为：

1
flex-direction: row | row-reverse | column | column-reverse

HTML代码为：

1
2
3
4
5
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
</span>
  • row(默认值)：伸缩容器若为水平方向轴，伸缩项目的排版方式为从左向右排列。示例：
1
2
3
4
.flex-container {
	display: flex;
	flex-direction: row;
}
  • row-reverse：伸缩容器若为水平方向轴，伸缩项目排版方式为从右向左排列。示例：
1
2
3
4
.flex-container {
	display: flex;
	flex-direction: row-reverse;
}
  • colum：伸缩容器若为垂直方向轴，伸缩项目的排版方试喂从上向下排列。示例：
1
2
3
4
.flex-container {
	display: flex;
	flex-direction: colum;
}
  • column-reverse：伸缩若为垂直方向轴，伸缩项目的排版方试喂从下向上排列。示例：
1
2
3
4
.flex-container {
	display: flex;
	flex-direction: colum-reverse;
}

1.3 flex-wrap

该属性主要用来指定伸缩容器的主轴线方向空间不足的情况下，是否换行以及改如何换行，其语法为：

1
flex-wrap: nowrap | wrap | wrap-reverse

HTML代码为：

1
2
3
4
5
6
7
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
	<span class="flex-item">4</span>
	<span class="flex-item">5</span>
</span>
  • nowrap（默认值）：即使空间不足，伸缩容器也不允许换行。示例：
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • wrap：伸缩容器在空间不足的情况下允许换行。若为主轴为水平轴，则换行的方向为从上到下。示例：
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • wrap-reverse： 伸缩容器在空间不足的情况下允许换行。若为主轴为水平轴，则换行的方向为从下到上（和wrap相反）。示例：
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap-reverse;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}

1.4 flex-flow

该属性是flex-direction和flex-wrap属性的缩写版本，它同时定义了伸缩容器的主轴和侧轴，其默认值为row nowrap。该属性语法为：

1
flex-flow: flex-direction flex-wrap

HTML代码为：

1
2
3
4
5
6
7
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
	<span class="flex-item">4</span>
	<span class="flex-item">5</span>
</span>

下面我们以flex-flow:row wrap-reverse为例进行介绍，示例：

1
2
3
4
5
6
7
8
9
10
.flex-container {
	display: flex;
	flex-flow: row wrap-reverse;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}

1.5 justify-content

该属性用来定义伸缩项目沿主轴线的对齐方式，其语法为：

1
justify-content: flex-start | flex-flex-end | center | space-between | space-around

HTML代码为：

1
2
3
4
5
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
</span>

下面介绍这个5个属性值的含义：

  • flex-start（默认值）：伸缩项目向主轴线的起始位置靠齐。示例：
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • flex-end：伸缩项目向主轴线的结束位置靠齐。示例：
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • center：伸缩项目向主轴线的中间位置靠齐。示例：
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • space-between：伸缩项目会平均地分布在主轴线里。第一个伸缩项目在主轴的开始位置，最后一个伸缩项目在主轴线的终点位置。示例：
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • space-around：伸缩项目会平均地分布在主轴线里，两端保留一半的空间。示例：
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}

1.6 align-items

该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式。其语法为：

1
align-items: flex-start | flex-end | center | baseline | stretch

HTML代码为：

1
2
3
4
5
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
</span>
  • flex-start（默认值）：伸缩项目向交叉轴的起始位置靠齐。示例：
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • flex-end：伸缩项目向交叉轴的结束位置靠齐。示例：
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • center：伸缩项目向交叉轴的中间位置靠齐。示例：
1
2
3
4
5
6
7
8
9
10
11
.flex-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • baseline： 伸缩项目根据它们的基线对齐。示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.flex-container {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
#item1 {
	padding-top: 15px;
}
#item2 {
	padding-top: 10px;
}
#item3 {
	padding-top: 5px;
}
  • stretch（默认值）：伸缩项目在交叉轴方向拉伸填充整个伸缩容器。示例
1
2
3
4
5
6
7
8
9
10
.flex-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
}

1.7 align-content

该属性主要用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目在主轴上使用justify-content，其语法为：

1
2
3
4
5
6
7
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
	<span class="flex-item">4</span>
	<span class="flex-item">5</span>
</span>

–
说明 flex-wrap：wrap 这个一定要开启，且它在出现换行的情况下才能看到效果。下面提到的伸缩项目均指伸缩项目所在的行，因为这里调整的其实是伸缩项目换行后每行之间的对齐方式。

–

下面介绍这6个属性值的含义。

  • flex-start（默认值）：伸缩项目向交叉轴的起始位置靠齐。示例：
1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • flex-end：伸缩项目向交叉轴的结束位置靠齐。示例：
1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-end;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • center：伸缩项目向交叉轴的中间位置靠齐。示例：
1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: center;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • space-between：伸缩项目在交叉轴中平均分布。示例：
1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: space-between;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • space-around：伸缩项目在交叉轴中平均分布，且两边各有一半的空间。示例：
1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: space-around;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
  • stretch（默认值）：伸缩项目将会在交叉轴上伸展以占用剩余空间。示例：
1
2
3
4
5
6
7
8
9
10
11
12
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: stretch;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}

2、伸缩项目属性

伸缩项目支持的属性有：

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

2.1 order

这个属性用于定义项目的排列顺序。数值越小，排列越靠前，默认值为0，其语法为：

1
order: integer

HTML代码如下：

1
2
3
4
5
6
7
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
	<span class="flex-item">4</span>
	<span class="flex-item">5</span>
</span>

示例CSS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
.item5 {
	order: -1;
}

–

由于类名item5的元素设置order属性为-1，所以排在第一位

–

2.2 flex-grow

该属性定义伸缩项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。如果所有伸缩项目的flex-grow设置为1，那么每一个伸缩项目将设置为一个大小相等的剩余空间。如果你将其中一个伸缩项的flex-grow设置为2，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。其语法为：

1
flex-grow: number （默认值为0）

HTML代码如下：

1
2
3
4
5
6
7
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
	<span class="flex-item">4</span>
	<span class="flex-item">5</span>
</span>

示例CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
.item5 {
	flex-grow: 1;
}

2.3 flex-shrink

该属性用来定义伸缩项目的收缩能力，其语法为：

1
flex-shrink: number (默认值为1)

HTML代码如下：

1
2
3
4
5
6
7
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
	<span class="flex-item">4</span>
	<span class="flex-item">5</span>
</span>

示例CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
.item5 {
	flex-shrink: 3;
}

–

本例子中，类名为item5的元素在空间不足的情况下，缩小为其他元素缩小大小的1/3

–

2.4 flex-basis

该属性用来设置伸缩项目的基准值，剩余空间按比率进行伸缩，其语法如下：

1
flex-basis: length | auto

其默认值为：auto

HTML代码如下：

1
2
3
4
5
6
7
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
	<span class="flex-item">4</span>
	<span class="flex-item">5</span>
</span>

示例CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
.item5 {
	flex-basis: 100px;
}

2.5 flex

该属性是flex-grow、flex-shrink和flex-basis这三个属性的缩写，其语法为：

1
flex: none | flex-grow flex-shrink flex-basis

其中第二个参数和第三个参数（flex-shrink和flex-basis）是可选参数。默认值为0 1 auto。

HTML代码如下：

1
2
3
4
5
6
7
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
	<span class="flex-item">4</span>
	<span class="flex-item">5</span>
</span>

示例CSS代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
.item3 {
	flex: 1;
}

–

本例子中，类名为item3的元素宽度为50.当该元素被设置为flex: 1后，该元素就会伸缩容器的剩余空间占满，其实本质上就等于flex-grow: 1。

–

2.6 align-self

该元素用来设置单独的伸缩项目在交叉轴上的对齐方式，会覆写默认的对齐方式，其语法为：

1
align-self: auto | flex-start | flex-end | center | baseline | stretch

HTML代码如下：

1
2
3
4
5
<span class="flex-container">
	<span class="flex-item">1</span>
	<span class="flex-item">2</span>
	<span class="flex-item">3</span>
</span>

下面要介绍这6个属性值。

  • auto：伸缩项目按照自身设置的宽高显示，如果没有设置，则按stretch来计算其值。示例CSS代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
.item3 {
	align-self: auto;
}
  • flex-start：伸缩项目向交叉轴的开始位置对齐。示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
.item3 {
	align-self: flex-start;
}
  • flex-end：伸缩项目向交叉轴的结束位置靠齐。示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
.item3 {
	align-self: flex-end;
}
  • center：伸缩项目向交叉轴的中心位置靠齐。示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
.item3 {
	align-self: center;
}
  • baseline：伸缩项目按照基线对齐。示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
	height: 50px;
}
.item1 {
	align-self: baseline;
	font-size: 40px;
}
.item2 {
	align-self: baseline;
	font-size: 30px;
}
.item3 {
	align-self: baseline;
	font-size: 20px;
}
  • stretch：伸缩项目在交叉轴方向占满伸缩容器。示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 200px;
	height: 150px;
}
.flex-item {
	width: 50px;
}
.item1 {
	align-self: stretch;
}
.item2 {
	align-self:stretch;
	height: 50px;
}
.item3 {
	height: 50px;
}