知识点

一文吃透 CSS Flex 布局 (opens new window)

弹性盒子（Flex）

• 弹性盒子由弹性容器（Flex container）和弹性子元素（Flex item）组成。
• 通过将容器设置为display: flex | inline-flex;来让该容器变成弹性容器。
• 弹性容器中有两个轴主轴和交叉轴，默认水平方向为主轴，所以默认情况下，弹性容器内的弹性子元素，都是在水平方向排列。
• 使用flex-direction属性，可以改变弹性容器的主轴方向，默认值为row，可选值有row-reverse、column、column-reverse。
• justify-content属性规定了弹性子元素在弹性容器轴的对齐方式，有五个值flex-start（从头对齐）、flex-end（从尾部对齐）、center（居中对齐）、space-between（左右两端对齐）、space-around（均分对齐）。
• align-items属性规定了弹性子元素在弹性容器交叉轴的对齐方式，同样也有五个值flex-start（交叉轴头部对齐）、flex-end（交叉轴尾部对齐）、center（居中对齐）、baseline（基线对齐）、stretch（默认对齐方式，拉伸）。
• align-content属性类似于align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。值和justify-content一样。
• order属性用来定义弹性子元素的排列顺序，可以为负值，值越小的就会排在越前边。
• align-self属性用来定义当前弹性子元素自己在交叉轴的对齐方式。值和align-items一样。
• flex属性用于指定弹性子元素如何分配空间。
• flex: auto（1 1 auto） | initial（0 1 auto） | none（0 0 auto） | inherit（继承父元素） | [flex-grow]（定义弹性盒子元素的扩展比率） || [flex-shrink]（定义弹性盒子元素的收缩比率） || [flex-basis]（定义弹性盒子元素的默认基准值）。
• 当flex属性的值只有一个时，必须是一个[flex-grow]的有效值，简写会拓展为[flex-grow] 1 0，或者是一个[flex-basis]的有效值，那么简写会拓展为1 1 [flex-basis]，或者是none 或者全局关键字之一。
• 当flex属性的值有两个时，第一个值必须是[flex-grow]的一个有效值，第二个可以是[flex-shrink]或者[flex-basis]两个其中一个的有效值。
• [flex-grow]的关键值为一个数字。
• [flex-shrink]的关键值为一个数字。
• [flex-basis]的关键值为元素的长度，合法值有auto、inherit、后面跟%，px，em的字符串、其他任何长度单位的数字。当我们设置auto时，会看当前元素有没有设置width，如果有，就会将width的值做为flex-basis的值，如果没有，就会用元素实际的长度做为flex-basis的值。