CSS之flex整体布局及使用

flex 布局概述

1. flex 是什么

• flex 是 Flexible Box 的缩写,意为弹性布局
• flex 2009 年就已出现,浏览器兼容性很好,请放心使用

---

2. flex 解决了什么问题

• 块元素的垂直居中, flex 可以轻松解决
• 元素大小在容器中的自动伸缩,以适应容器的变化,特别适合移动端布局

---

3. flex 项目的布局方向是什么

• 一个物体在一个平面中, 要么水平排列, 要么垂直排列, flex 借鉴了这个思想
• flex 是一维布局, 项目任何时候只能沿一个方向排列,要么水平, 要么垂直
• flex 项目排列的方向, 称为主轴, 水平和垂直二种
• 与主轴垂直的称为交叉轴(有的教程也称之为副轴/侧轴)

---

4. flex 布局中常用术语有哪些(三个二)

序号	简记	术语
1	二成员	容器和项目(container / item)
2	二根轴	主轴与交叉轴(main-axis / cross-axis)
3	二根线	起始线与结束线(flex-start / flex-end)

---

5.flex 容器属性有哪些

序号	属性	描述
1	flex-direction	设置容器中的主轴方向: 行/水平方向, 列/垂直方向
2	flex-wrap	是否允许创建多行容器,即 flex 项目一行排列不下时, 是否允许换行
3	flex-flow	简化 flex-direction, flex-wrap 属性
4	justify-content	设置 flex 项目在主轴上对齐方式
5	align-items	设置 flex 项目在交叉轴上对齐方式
6	align-content	多行容器中,项目在交叉轴上的对齐方式

---

6. flex 项目属性有哪些

序号	属性	描述
1	flex-basis	项目宽度: 项目分配主轴剩余空间之前, 项目所占据的主轴空间宽度
2	flex-grow	项目的宽度扩展: 将主轴上的剩余空间按比例分配给指定项目
3	flex-shrink	项目的宽度收缩: 将项目上多出空间按比例在项目间进行缩减
4	flex	是上面三个属性的简化缩写: flex: flex-grow flex-shrink flex-basis
5	align-self	单独自定义某个项目在交叉轴上的对齐方式
6	order	自定义项目在主轴上的排列顺序,默认为 0,书写顺序,值越小位置越靠前

---

flex 容器与项目

1. display属性

序号	属性值	描述	备注
1	flex;	创建 flex 块级容器	内部子元素自动成为 flex 项目
2	inline-flex;	创建 flex 行内容器	内部子元素自动成为 flex 项目

2. flex 容器与项目特征

序号	容器/项目	默认行为
1	容器主轴	水平方向
2	项目排列	沿主轴起始线排列(当前起始线居左)
3	项目类型	自动转换”行内块级”元素,不管之前是什么类型
4	容器主轴空间不足时	项目自动收缩尺寸以适应空间变化,不会换行显示
5	容器主轴存在未分配空间时	项目保持自身大小不会放大并充满空间

---

flex 容器主轴方向

1. flex-direction属性

序号	属性值	描述
1	row默认值	主轴水平: 起始线居中,项目从左到右显示
2	row-reverse	主轴水平:起始线居右, 项目从右向左显示
3	column	主轴垂直: 起始线居上,项目从上向下显示
4	column-reverse	主轴垂直: 起始线居下,项目从下向上显示

---

flex 容器主轴项目换行

1. flex-wrap属性

序号	属性值	描述
1	nowrap默认值	项目不换行: 单行容器
2	wrap	项目换行: 多行容器,第一行在上方
3	wrap-reverse	项目换行: 多行容器,第一行在下方

---

flex 容器主轴与项目换行简写

1. flex-flow属性

• flex-flow是属性flex-direction和flex-wrap的简写
• 语法: flex-flow: flex-direction flex-wrap

属性值	描述
row nowrap默认值	主轴水平, 项目不换行

以后使用这个简写属性方便代码观看减少代码量

• 代码演示：http://www.nflinetech.com/0410/flex.html

---

flex 容器主轴项目对齐

1. justify-content属性

当容器中主轴方向上存在剩余空间时, 该属性才有意义

序号	属性值	描述
1	flex-start默认	所有项目与主轴起始线对齐
2	flex-end	所有项目与主轴终止线对齐
3	center	所有项目与主轴中间线对齐: 居中对齐
4	space-between	两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5	space-around	分散对齐: 剩余空间在每个项目二侧平均分配
6	space-evenly	平均对齐: 剩余空间在每个项目之间平均分配

• 代码演示：http://www.nflinetech.com/0410/flex2.html

---

flex 容器交叉轴项目对齐

1. align-items属性

• 该属性仅适用于: 单行容器
• 当容器中交叉轴方向上存在剩余空间时, 该属性才有意义

序号	属性值	描述
1	flex-start默认	与交叉轴起始线对齐
2	flex-end	与交叉轴终止线对齐
3	center	与交叉轴中间线对齐: 居中对齐

• 代码演示：http://www.nflinetech.com/0410/flex3.html

---

flex 多行容器交叉轴项目对齐

1. align-content属性

• 该属性仅适用于: 多行容器
• 多行容器中, 交叉轴会有多个项目, 剩余空间在项目之间分配才有意义

序号	属性值	描述
1	stretch默认	项目拉伸占据整个交叉轴
1	flex-start	所有项目与交叉轴起始线(顶部)对齐
2	flex-end	所有项目与交叉轴终止线对齐
3	center	所有项目与交叉轴中间线对齐: 居中对齐
4	space-between	两端对齐: 剩余空间在头尾项目之外的项目间平均分配
5	space-around	分散对齐: 剩余空间在每个项目二侧平均分配
6	space-evenly	平均对齐: 剩余空间在每个项目之间平均分配

提示: 多行容器中通过设置flex-wrap: wrap | wrap-reverse实现

• 代码演示：http://www.nflinetech.com/0410/flex4.html

---

flex 项目交叉轴单独对齐

1. align-self属性

• 该属性可覆盖容器的align-items, 用以自定义某个项目的对齐方式

序号	属性值	描述
1	auto默认值	继承 align-items 属性值
2	flex-start	与交叉轴起始线对齐
3	flex-end	与交叉轴终止线对齐
4	center	与交叉轴中间线对齐: 居中对齐
5	stretch	在交叉轴方向上拉伸
6	baseline	与基线对齐(与内容相关用得极少)

• 代码演示：http://www.nflinetech.com/0410/flex6.html

---

flex 项目放大因子

1. flex-grow属性

• 在容器主轴上存在剩余空间时, flex-grow才有意义
• 该属性的值,称为放大因子, 常见的属性值如下:

序号	属性值	描述
1	0默认值	不放大,保持初始值
2	initial	设置默认值,与0等效
3	n	放大因子: 正数

• 代码演示：http://www.nflinetech.com/0410/flex7.html

---

flex 项目收缩因子

1. flex-shrink属性

• 当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
• 该属性的值,称为收缩因子, 常见的属性值如下:

序号	属性值	描述
1	1默认值	允许项目收缩
2	initial	设置初始默认值,与 1 等效
3	0	禁止收缩,保持原始尺寸
4	n	收缩因子: 正数

• 代码演示：http://www.nflinetech.com/0410/flex8.html

---

flex 项目计算尺寸

1. flex-basis属性

• 在分配多余空间之前,项目占据的主轴空间
• 浏览器根据这个属性，计算主轴是否有多余空间
• 该属性会覆盖项目原始大小(width/height)
• 该属性会被项目的min-width/min-height值覆盖

序号	属性值	描述
1	auto	默认值: 项目原来的大小
2	px	像素
3	%	百分比

优先级: 项目大小 width < flex-basis < min-width/height

• 代码演示：http://www.nflinetech.com/0410/flex9.html

---

flex 项目缩放的简写

1. flex属性

• 项目放大,缩小与计算尺寸,对于项目非常重要,也很常用
• 每次都要写这三个属性,非常的麻烦,且没有必要
• flex属性,可以将以上三个属性进行简化:
• 语法: flex: flex-grow flex-shrink flex-basis

1.1 三值语法

序号	属性值	描述
1	第一个值: 整数	flex-grow
2	第二个值: 整数	flex-shrink
3	第三个值: 有效宽度	flex-basis

举例:

序号	案例	描述
1	flex: 0 1 auto	默认值: 不放大,可收缩, 初始宽度
2	flex: 1 1 auto	项目自动放大或收缩适应容器
3	flex: 0 0 100px	按计算大小填充到容器中

1.2 双值语法

序号	属性值	描述
1	第一个值: 整数	flex-grow
3	第二个值: 有效宽度	flex-basis

举例:

案例	描述
flex: 0 180px	禁止放大,按计算大小填充到容器中

1.3 单值语法

序号	属性值	描述
1	整数	flex-grow
2	有效宽度	flex-basis
3	关键字	`initial	auto	none`

举例:

序号	案例	描述
1	flex: 1	flex: 1 1 auto
2	flex: 180px	flex: 1 1 180px
3	initial	flex: 0 1 auto
4	auto	flex: 1 1 auto
5	none	flex: 0 0 auto

推荐使用flex, 就像推荐使用flex-grow设置主轴与换行一样

• 代码演示：http://www.nflinetech.com/0410/flex10.html

• 弹性布局项目顺序代码演示：http://www.nflinetech.com/0410/flex5.html

---

个人总结：

• 通过对flex弹性布局的学习，让我深刻理解到了flex属性的方便之处，但是也有难点，就是感觉属性好多，记起来的话容易弄混，比如align-content和align-self一个是交叉轴项目整体对齐、一个是项目独立对齐，感觉到时候使用起来会不知所措,尤其是最后放大、缩小因子及计算宽度简写宽度这点理解起来比较困难，容易晕。flex:1 0 30px这个我得理解是，假如容器宽度为300、有三个项目宽度分别为100，这个属性设置在第一个项目，那就是首先第一个的宽度会变为30px，容器总宽度会变为230px多出70px，70px 除 1 = 70px，允许放大，就是30px + 70px = 100px，所以第一个项目最后的宽度为100px。