移动端布局 - flex布局

---

一、flex布局原理

通过给父盒子添加flex属性, 来控制子盒子的位置和排列方式.

• 当我们为盒子设置flex布局以后, 子元素的float, clear 和 vertical-align属性将失效
• 采用Flex布局的元素, 称为Flex容器（flex container）, 它的所有子元素自动成为容器成员, 称为Flex项目（flex item）, 简称“项目”.

二、父项常见属性

• flex-direction : 设置主轴方向
• justify-content : 设置主轴上的子元素排列方式
• flex-wrap : 设置子元素是否换行
• align-content : 设置侧轴上的子元素的排列方式 (多行)
• align-items : 设置侧轴上的子元素的排列方式 (单行)
• flex-flow : 复合属性 , 相当于同时设置了 flex-direction 和 flex-wrap

1. 主轴与侧轴

在flex布局中, 分为主轴和侧轴, 也可以叫x,y轴 主轴和侧轴是会变化的. 可以通过
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 : 换行

4. 设置侧轴上的子元素排列方式 (单行)

align-items 设置侧轴上的子元素排列方式

属性

• flex-start : 从上到下
• center : 挤在一起居中
• stretch : 拉伸

5. 设置侧轴上的子元素排列方式 (多行)

align-content 设置侧轴上的子元素排列方式, 只能用于子项出现换行的情况.

属性

• flex-start : 默认值从头开始
• flex-end : 从尾部开始排列
• center : 在侧轴中间显示
• space-around : 子项在侧轴平方剩余空间
• space-between : 先两边贴边, 再平分剩余空间

6. flex-flow

复合属性 , 相当于同时设置了 flex-direction 和 flex-wrap

三、子项常见属性

1. flex子项目占的份数

flex属性定义子项目分配的剩余空间, 用flex来表示占多少份

2. align-self控制子项自己在侧轴的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式.可覆盖 align-items属性.

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

3. order属性定义子项的排列顺序

数值越小, 排列越靠前.