文章目录
- 一、介绍
- 二、基本概念
- 三、容器属性
- 1.flex-direction
- 2.flex-wrap
- 3.flex-flow
- 4.justify-content
- 5.align-items
- 6.align-content
- 四、项目属性
- 1.order
- 2.align-self
- 3.flex
一、介绍
Flex 是 Flexible Box 的缩写，意为“弹性布局”或者“弹性盒子”，是 CSS3 中的一种新的布局模式，可以简便、完整、响应式地实现各种页面布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。目前，几乎所有的浏览器都支持 Flex 布局。
二、基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。容器默认存在两根轴，分别为水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。如下图所示：
CSS 中提供了以下属性来实现 Flex 布局：
| 属性 | 描述 |
|---|---|
| display | 指定 HTML 元素的盒子类型 |
| flex-direction | 指定弹性盒子中子元素的排列方式 |
| flex-wrap | 设置当弹性盒子的子元素超出父容器时是否换行 |
| flex-flow | flex-direction 和 flex-wrap 两个属性的简写 |
| justify-content | 设置弹性盒子中元素在主轴（横轴）方向上的对齐方式 |
| align-items | 设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式 |
| align-content | 修改 flex-wrap 属性的行为，类似 align-items，但不是设置子元素对齐，而是设置行对齐 |
| order | 设置弹性盒子中子元素的排列顺序 |
| align-self | 在弹性盒子的子元素上使用，用来覆盖容器的 align-items 属性 |
| flex | 设置弹性盒子中子元素如何分配空间 |
| flex-grow | 设置弹性盒子的扩展比率 |
| flex-shrink | 设置弹性盒子的收缩比率 |
| flex-basis | 设置弹性盒子伸缩基准值 |
三、容器属性
1.flex-direction
flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：
| 值 | 描述 |
|---|---|
| row | 默认值，主轴沿水平方向从左到右 |
| row-reverse | 主轴沿水平方向从右到左 |
| column | 主轴沿垂直方向从上到下 |
| column-reverse | 主轴沿垂直方向从下到上 |
2.flex-wrap
flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：
| 值 | 描述 |
|---|---|
| nowrap | 默认值，表示项目不会换行 |
| wrap | 表示项目会在需要时换行 |
| wrap-reverse | 表示项目会在需要时换行，但会以相反的顺序 |
3.flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写，这里不详细说了，举个例子：
flex-flow: row-reverse wrap;
4.justify-content
justify-content 属性用于设置弹性盒子中子元素（项目）在主轴（横轴）方向上的对齐方式，属性的可选值如下：
| 值 | 描述 |
|---|---|
| flex-start | 默认值，左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 物品均匀分布在行中；第一项在起始行，最后一项在结束行 |
| space-around | 项目均匀分布在行中，周围空间相等。请注意，视觉上的空间是不相等的，因为所有项目的两边都有相等的空间。第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个空间单位，因为下一个项目有自己的适用间距 |
| space-evenly | 项目分布使得任何两个项目之间的间距（以及边缘的空间）相等 |
5.align-items
align-items 属性用来设置弹性盒子中子元素（项目）在侧轴（纵轴）方向上的对齐方式，适用于单行，属性的可选值如下：
| 值 | 描述 |
|---|---|
| stretch | 默认值，项目将被拉伸以适合容器(项目不指定高度的情况下) |
| center | 项目位于容器的中央 |
| flex-start | 项目位于容器的顶部 |
| flex-end | 项目位于容器的底部 |
| baseline | 各项目中的文字基线对齐 |
6.align-content
align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，适用于多行，属性的可选值如下：
| 值 | 描述 |
|---|---|
| stretch | 默认值，将项目拉伸以占据剩余空间 |
| center | 项目在容器内居中排布 |
| flex-start | 项目在容器的顶部排列 |
| flex-end | 项目在容器的底部排列 |
| space-between | 同justify-content，只不过改成交叉轴方向 |
| space-around | 同justify-content，只不过改成交叉轴方向 |
| space-evenly | 同justify-content，只不过改成交叉轴方向 |
四、项目属性
1.order
order 属性用来设置项目在容器中出现的顺序，您可以通过具体的数值来定义项目在容器中的位置，其中 number 就是项目在容器中的位置，默认值为 0。
2.align-self
align-self 属性允许您为某个项目设置不同于其它项目的对齐方式，该属性可以覆盖 align-items 属性的值。align-self 属性的可选值如下：
| 值 | 描述 |
|---|---|
| auto | 默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch” |
| stretch | 项目将被拉伸以适合容器 |
| center | 项目位于容器的中央 |
| flex-start | 项目位于容器的顶部 |
| flex-end | 项目位于容器的底部 |
3.flex
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写，语法格式如下：
flex: flex-grow flex-shrink flex-basis;
参数说明如下：
flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；
flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；
flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 “%”、“px”、“em” 等单位的形式。它和width属性类似，但也有点不同。它的初始值是 auto，此时浏览器会检查项目是否设置了 width 属性值。如果有，则使用 width 的值作为 flex-basis 的值；如果没有，则用项目内容自身的大小。如果 flex-basis 的值不是 auto，width 属性会被忽略，同时flex-basis优先级比width高，会覆盖width。
另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）。
flex-basis会根据内容自动撑开，而width属性不会。
