flex布局API

flex布局API众多，记录一下API方法和使用，为了方便日常开发和记忆。

弹性盒子

给div等块级元素设置display:flex或span等内联元素设置display:inline-flex，弹性盒子flex布局就生成了。这里借用官网说明：

1. 弹性容器(Flex container)

包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。

2. 弹性项目(Flex item)

弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。

3. 轴(Axis)

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

• flex-direction 确立主轴。
• justify-content 定义了在当前行上，弹性项目沿主轴如何排布。
• align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。
• align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。

4. 方向(Direction)

弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。

• order 属性将元素与序号关联起来，以此决定哪些元素先出现。
• flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。

5. 行(Line)

根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

6. 尺寸(Dimension)

根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。

• min-height 与 min-width 属性初始值将为 0。
• flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写，描述弹性项目的整体的伸缩性。

索引属性

这些属性都是控制flex子项的表现，只不过容器属性控制整体，子项属性控制个体。

flex容器属性	flex子项属性
flex-direction	order
flex-wrap	flex-grow
flex-flow	flex-shrink
justify-content	flex-basis
align-items	flex
align-content	align-self

flex容器属性

1. flex-direction

flex-direction用来控制整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。

语法：

flex-direction: row | row-reverse | column | column-reverse;
复制代码

row

默认值，默认是当前水平文档流方向即从左到右排列。（受direction影响）

row-reverse

方向与row相反。

column

显示为列即从上到下排列。

column-reverse

方向与column相反。

请点击demo查看效果

2. flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示。

语法：

flex-wrap: nowrap | wrap | wrap-reverse;
复制代码

nowrap

默认值，表示单行显示，不换行。

wrap

宽度不足换行显示。

wrap-reverse

宽度不足换行显示。换行方向是从下到上与wrap相反。

请点击demo查看效果

3. flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

语法：

flex-flow: <'flex-direction'> || <'flex-wrap'>
复制代码

给容器设置如下样式：

.flex{
    flex-flow: row-reverse wrap-reverse;
}
复制代码

4. justify-content

justify-content用来控制子项整体的对齐和分布方式。

语法：

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
复制代码

flex-start

默认值，默认表现为左对齐。

flex-end

默认表现为右对齐。

center

表现居中对齐。

space-between

表现为两端对齐。

space-around

表现为每个子项均匀分布，左右两侧子项的空白只有中间子项空白宽度的一半。视觉上空间不相等，但每个子项的空间相等（子项两侧的空白间距）

space-evenly

表现为每个子项均匀分布，子项两侧空白间距完全相等。视觉上两个子项之间的间距（以及到边缘的空间）相等。

请点击demo查看效果

5. align-items

align-items用来控制子项整体相对于容器的垂直对齐方式。

语法：

align-items: stretch | flex-start | flex-end | center | baseline;
复制代码

stretch

默认值。子项高度拉伸整个容器，如果子项设置了高度值，则按照设置的高度值渲染。

flex-start

表现为容器顶部对齐。

flex-end

表现为容器底部对齐。

center

表现为垂直居中对齐。

baseline

表现为子项都相对于容器的基线（字母x的下边缘）对齐。

请点击demo查看效果

6. align-content

与just-content属性类似，不同的是align-content作用于垂直方向子项的对齐和分布方式。如果所有子项只有一行，则align-content属性没有任何效果。

语法：

align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
复制代码

stretch

默认值。每一行子项都等比例拉伸铺满整个容器。

flex-start

表现为顶部堆叠。

flex-end

表现为底部堆叠。

center

表现为子项整体垂直居中对齐。

space-between

表现为上下两行两端对齐。

space-around

表现与justify-content的space-around一致，方向为垂直方向而已。

space-evenly

表现与justify-content的space-evenly一致，方向为垂直方向而已。

请点击demo查看效果

flex子项属性

1. order

order属性用来控制子项在布局时的顺序。子项元素按照order属性的值的增序进行排列。

语法：

order: <integer>;  /* 整数值，默认为0 */
复制代码

请点击demo查看效果

2. flex-grow

flex-grow属性用于放大子项的空间占用比例。

语法：

flex-grow: <number>; /* 数值，可以是小数，默认0 */
复制代码

flex-grow不支持负数，默认值是0。当flex-grow大于0，则分配规则如下：

1. 所有剩余空间大小为1。
2. 如果只设置了一个子项的flex-grow属性值:
   1. 如果flex-grow值大于1，则独占所有剩余空间。
   2. 如果flex-grow值小于1，则扩展空间就等于总剩余空间乘以flex-grow值。

请点击demo查看效果

3. 如果给多个子项设置flex-grow属性值:
   1. 如果flex-grow值总和大于1，则扩展空间被完全利用，空间按子项的flex-grow值的比例分配，例如子项flex-grow比例1：2：1，那么中间子项的空间是左右子项的一倍。
   2. 如果flex-grow值的总和小于1，则每个子项扩展的空间就等于总剩余空间乘以当前子项flex-grow值。

请点击demo查看效果

3. flex-shrink

flex-shrink属性用来控制子项当容器空间不足，子项的收缩比例。

语法：

flex-shrink: <number>; /* 数值，默认值是 1 */
复制代码

flex-shrink不支持负数，默认值是1，所有子项都会收缩。如果为0，则不收缩，表现为适应宽度。

flex-shrink和flex-grow比较类似，flex-shrink是容器不足时如果收缩空间，flex-grow是容器充足如何利用空间。规则也类似：

1. 如果只设置了一个子项的flex-shrink属性值:
   1. 如果flex-shrink值大于等于1，则完全收缩，填满容器。
   2. 如果flex-shrink值小于1，则不完全收缩，溢出容器。
2. 如果给多个子项设置flex-shrink属性值:
   1. 如果flex-shrink值总和大于1，则收缩完全，每个子项收缩尺寸的比例和flex-shrink值的比例一样。
   2. flex-shrink值的总和小于1，则不完全收缩，每个子项的收缩尺寸就是flex-shrink的值。

请点击demo查看效果

4. flex-basis

flex-basis属性用来描述子项默认空间大小。

flex-basis: <length> | auto; /* 默认值是 auto */
复制代码

flex-basis默认值是auto，有设置width空间就是width，没有就按内容宽度来。

请点击demo查看效果

5. flex

flex属性是flex-grow，flex-shrink和flex-basis的缩写。

flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
复制代码

其中第2个（flex-shrink）和第3个(flex-basis)参数是可选的。

• 默认值为0 1 auto。
• flex:none取值为0 0 auto。
• flex:auto取值为1 1 auto。

1. 一个参数

• 一个无单位数(<number>): 它会被当作flex-grow的值。
• 一个有效的宽度(width)值: 它会被当作flex-basis的值。
• 关键字none，auto或initial。

2. 二个参数

• 第一个值必须为一个无单位数，并且它会被当作flex-grow的值。
• 第二个值一个无单位数：它会被当作flex-shrink的值。
• 第二个值一个有效的宽度值: 它会被当作flex-basis的值。

3. 三个参数

• 第一个值必须为一个无单位数，并且它会被当作flex-grow的值。
• 第二个值必须为一个无单位数，并且它会被当作flex-shrink的值。
• 第三个值必须为一个有效的宽度值， 并且它会被当作flex-basis的值。

请点击demo查看效果

6. align-self

align-self属性用于控制子项的垂直对其方式。

语法：

align-self: auto | stretch | flex-start | flex-end | center | baseline;
复制代码

align-self默认值auto会继承容器align-items的属性值。属性值的效果与之前介绍的作用一样，这里不再重复说明。

请点击demo查看效果

其他

• 对子项设置float,clear,vertical-align属性没有任何作用。
• 大部分的规范都在mdn官方文档有详细的描述，本文更重API的使用和日常开发。

参考文章

• A Complete Guide to Flexbox
• CSS 弹性盒子
• flex布局教程

转载于:https://juejin.im/post/5d2eda74f265da1b5f268ac1