Flex 弹性布局

目前 CSS3 中新增的 Flex 弹性布局已经成为前端页面布局的首选方式，因此这里来介绍一下何为 Flex 弹性布局。

Flex 布局可以为盒状模型提供最大的灵活性，自动弹性伸缩，合适适配不同大小的屏幕。

说明

当父盒子设置为 flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效。

伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局。

任何一种元素都可以指定为 flex 布局。

.wrap {
  display: flex
}
/* 行内元素也可以 */
span {
  display: inline-flex
}

Flex 布局原理

Flex 布局的原理就是通过向父盒子添加 flex 属性，来控制子盒子的位置和排列方式。

1. 基本概念

容器 —— 采用 flex 布局的元素；项目 —— flex 布局中的子元素。

2. 父项常见属性

父项常见属性有 6 个：

属性	说明
flex-direction	设置主轴方向
justify-content	设置主轴上子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上子元素排列方式（多行）
align-items	设置侧轴上子元素排列方式（单行）
flex-flow	等于 flex-direction + flex-wrap

父项常见属性

---

1. 主轴与侧轴

在 flex 布局中，分为主轴（默认 x 轴）和侧轴两个方向：

2. flex-dirction

该属性用于设置主轴方向，有 4 个属性值：

属性值	说明
row	默认，从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

注意：主轴和侧轴会发生变化的，子元素根据主轴排列。

3. justify-content

该属性用于设置主轴子元素排列，有 5 个属性值：

属性值	说明
flex-start	默认（从左到右），从头部开始
flex-end	从尾部开始
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

重点记忆：space-between —— 先贴边，在分配剩余空间。

4. flex-wrap

该属性用于设置子元素是否换行，有 2 个属性值：

属性值	说明
nowrap	默认，不换行
wrap	换行

flex 布局中，默认子元素不换行。如果装不下，会自动缩小子元素宽度。

可以通过修改 flex-wrap: wrap 使得换行显示，保留原有大小。

5. align-items

该属性用于设置侧轴上子元素排列方式，适用于单行元素。

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	挤在一起居中，垂直居中
stretch	默认，拉伸

利用此属性，配合 justify-content 可以实现水平居中、垂直居中。

div {
  display: flex;
  justify-content: center;			// 主轴，默认 x
  align-items: center;					// 侧轴，默认 y
}

注意：重点记忆垂直居中即可。

6. align-content

该属性用于设置侧轴上子元素排列方式，适用于多行元素。

此属性只能用于子项 出现换行 的情况，单行下是无效的。

属性值	说明
flex-start	默认，侧轴头部开始
flex-end	侧轴尾部开始
center	在侧轴中间显示
space-around	子项在侧轴平分空间
space-between	子项在侧轴线分布在两头，在平分空间
stretch	设置子项元素高度平分父元素高度

7. flex-flow

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。

flex-direction: column;
flex-wrap: wrap;
// 以上两句可以简写为
flex-flow: column wrap;

子项常见属性

主要有以下 3 种属性：

属性	说明
flex	子项占剩余空间的份数
align-self	控制子项在侧轴的排列方式
order	定义子项的排列顺序（前后顺序）

1. flex

该属性用于说明子项占剩余空间的份数，默认值是 0 。

/* 给定一个父盒子，由三个子盒组成。左右两个子盒宽度固定，中间子盒宽度自适应 */
section {
  display: flex;
  width: 60%;
  height: 150px;
  margin: 0 auto;
}
section div:nth-child(1) {
  width: 100px;
  height: 150px;
  background-color: red;
}
section div:nth-child(1) {
  flex: 1;					/* 将剩余空间分成一份，也就是独占剩余空间 */
  background-color: green;
}
section div:nth-child(3) {
  width: 100px;
  height: 150px;
  background-color: blue;
}

这就是有名的 ” 圣杯布局 “。

2. align-self

该属性用于控制子项自己在侧轴上的排列，不是整体排列，而是让某个子盒单独排列。

div span:nth-child(3) {
	align-self: flex-end;
}

3. order

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

div span:nth-child(2) {
  order: -1;		// 默认 0
}