CSS - 弹性布局（flex）

目录

传统布局的不足之处：导航栏实现案例说明问题

关于单个、一行多个浮动元素的水平居中实现

弹性布局

弹性容器的主轴和侧轴概念

弹性容器的主轴对齐&侧轴对齐（一维布局特性说明）

主轴flexitem元素弹性宽高，以及换行/换列

多行对齐

flex-flow复合样式属性

flexbox样式总结

flexitem专有样式说明

flex-grow及按比扩容

flex-shrink及按权重比压缩

flex-basis

flex复合写法

order

align-self

传统布局的不足之处：导航栏实现案例说明问题

CSS - 定位布局_伏城之外的博客-CSDN博客

上一个章节定位布局的粘性定位小节中，实现工商银行导航栏时，我使用了ul li，并且由于li是块容器，所以不支持在同一行上排列。此时有两个传统方案可以让li在一行排列：

• 将li转为行内块元素
• 将li转为浮动元素

但是这两个方案都有缺点：

• 行内块元素之间会产生因为代码空格或换行导致的间隙，我们可以通过去除代码中行内块之间的空格、换行，来消除行内块元素之间的空隙，但是此时代码可读性就变差了
• 浮动元素间虽然紧密贴合，但是会脱标，导致父元素ul的宽高塌陷，虽然给父元素加overflow:hidden，将父元素ul变为BFC容器可以解决宽高塌陷，但是此时父元素的内容区宽度是占满一行的，这将导致无法让父元素紧密包裹子浮动元素，导致无法带子浮动元素水平居中

关于单个、一行多个浮动元素的水平居中实现

首先浮动元素脱标后，浮动元素在浮动流中是不会占满一行的（即不会通过margin来占满剩余宽度），所以此时margin:0 auto无法让浮动元素实现水平居中。

此时我们可以给浮动元素包裹一个标准流父元素，并设置宽高为子浮动元素宽高，之后margin:0 auto父元素。

这种方法也适用于一行多个浮动元素的水平居中

但是当浮动元素未设置宽高（即浮动元素宽高由其内容撑开）时，其标准流父元素的宽高设置将很难给定，而父元素宽高无法确定，则无法实现准确的父元素携带子浮动元素水平居中。

那么此时我们需要怎么办呢？

弹性布局

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

这里一维布局的意思指的是：flexbox的子元素只会按照行方向或者列方向，一个方向上进行布局。

当我们为一个元素添加display:flex样式后，该元素就变为了flexbox，即弹性容器。flexbox的子元素就变为了flexitem，即弹性项目。

弹性布局的弹性和布局分别体现在：

• 弹性：flexitem元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
• 布局：flexbox给予了flexitem强大的空间分布和对齐能力

弹性容器上支持如下样式属性：

• flex-flow：flex-direction flex-wrap
• justify-content
• align-items
• align-content

弹性项目上支持如下样式属性：

• order
• flex：flex-grow flex-shrink flex-basis
• aligin-self

弹性容器的主轴和侧轴概念

我们知道弹性布局是一维布局，flexItem只会在flexbox的一个方向上进行布局，即flexbox的主轴方向。而flexbox的主轴的垂直方向就是flexbox的侧轴方向。

flexbox的主轴并非固定是水平方向或垂直方向，而是取决于flexbox元素的flex-direction样式,flex-direction属性值如下：

• row（默认）
• row-reverse
• colum
• colum-reverse

我们通过下图来理解这四个值得含义

弹性容器的主轴对齐&侧轴对齐（一维布局特性说明）

其实理论上来说，弹性布局是一维布局，弹性容器中的弹性项目flexitem只能在主轴上进行各种对齐。而flexitem元素在主轴上的各种对齐就是主轴对齐。侧轴对齐并不是针对每个flexitem元素的，而是针对整个主轴的。所以flexitem元素只在主轴上布局，弹性布局是一维布局。

主轴对齐指的是：flexitem在flexbox主轴上的对齐方式

侧轴对齐指的是：整个主轴在侧轴上的位置

设置主轴上元素的对齐方式使用样式justify-content，它具有如下属性值：

• flex-start（默认值）
• center
• flex-end
• space-between
• space-around

下面通过代码看看以上对齐效果：

justify-content：flex-start

flexitem元素从flexbox容器的主轴起始线排列

justify-content：center

flexitem元素从flexbox容器的主轴中间排列

justify-content：flex-end

flexitem元素从flexbox容器的主轴终止线排列

justify-content：space-around

每个flexitem元素的左右空间相等

justify-content：space-between

flexitem元素之间间隔相等

设置整个主轴在侧轴上的位置用样式align-items，它具有如下属性值：

• stretch（默认值）
• flex-start
• center
• flex-end
• baseline

下面通过代码看看以上属性值效果：

align-items的默认值是stretch，含义是自动拉伸自适应高度的flexitem元素的高度为flexbox的高度

对于设置高度height的flexitem元素而言，align-items不会拉伸其高度

如果flexbox也没有高度，则flexbox会被高度最高的flexitem元素撑开，即flexbox的高度为最高的flexitem元素的高度。

所以实际上，此时无高度的flexitem会默认被拉伸到最高的兄弟flexitem元素的高度

主轴放置于侧轴起始位置

主轴放置于侧轴中间位置

主轴放置于侧轴结束位置

主轴上flexitem元素按照内容文字的基线baseline对齐

主轴flexitem元素弹性宽高，以及换行/换列

当我们主轴上flexitem过多，以至于超出flexbox宽/高时，默认情况下，主轴上的flexitem元素是不会换行的，而是表现出flexitem元素的弹性宽/高特点，即flexitem元素的会被尽可能地压缩宽/高以适应flexbox的宽/高，但是一个flexitem元素的宽度最多被压缩到内容宽高，如果flexitem压缩到内容宽高还是超过flexbox宽高的话，则默认会超出flexbox范围，而不是换行。

我们可以通过flexbox容器样式属性 flex-wrap 来控制主轴上flexitem是否换行，flex-wrap属性值如下：

• nowrap（默认值）
• wrap
• wrap-reverse

当给flexbox设置flex-wrap:wrap后，此时主轴上flexitem元素的宽高不会再被压缩，当flexbox一行/一列放不下多余flexitem时，则对应flexitem换行或换列显示。

换行/换列时，如果flexbox在对应换行/换列方向上有剩余空间，默认情况下剩余空间会被均分，保证每个flex-item的在对应方向的边距相同。

但是如果我们设置了侧轴对齐方式，则

当flexbox设置了flex-wrap:wrap，即使主轴换行/换列也放不下多余的flexitem，flexitem也不会被被压缩宽高，而是超出flexbox范围。

flex-wrap：wrap-reverse是反向换行

需要注意的是 flex-direction：xxx；flex-wrap：wrap-reverse 不等价于 flex-direction：xxx-reverse; flex-wrap：wrap;

原因是：flex-wrap控制的是换行/换列的方向，而不是主轴的方向

多行对齐

上例中，我们可以通过align-items来设置多行的在侧轴上的对齐方式

但是可以发现,align-items设置的多行对齐，行与行之间总是留有空隙。

如果我们想让多行之间没有空隙的实现在侧轴上对齐，则需要借助flexbox的align-content样式。

首先，需要点明的是，align-content只能用于多行侧轴对齐设置，即只能用于flex-wrap:wrap的flexbox。

align-content从名字上看，其实就是将每一行或每一列当成一个整体元素，在flexbox侧轴上排列（让他们像主轴上的flexitem一样实现对齐），align-content具有如下常用属性值：

• normal（默认值）
• flex-start
• center
• flex-end
• baseline
• space-around
• space-between

当align-content为normal时，则多行根据align-items值在侧轴上对齐;

当align-content不是normal时，则多行根据lign-content值在侧轴上对齐;

flex-flow复合样式属性

flex-direction和flex-wrap可以复合写成flex-flow样式；

flex-flow：flex-direction flex-wrap

由于flex-direction的默认值是row，flex-wrap的默认值是nowrap，所以flex的默认值是：

flex-flow：row nowrap；

flexbox样式总结

我们通过给flexbox设置flex-direction来控制其主轴方向，设置flex-wrap来设置其是否换行，二者可以复合写为flex-flow。

主轴上flexitem元素的对齐使用justify-content，主轴行在侧轴上的位置用align-items，对于主轴多行情况，还可以将每一行当成整体元素使用align-content使其在侧轴上实现对齐。

flexitem专有样式说明

flexitem即flexbox在主轴上的弹性项目元素，当我们设置flexbox不换行时，flexitem元素的宽/高会具有弹性，下面以主轴row方向来说明：

• 当flexbox一行放不下所有flexitem元素，则所有flexitem的宽度会被自动压缩到可以适配一行宽度位置，但是最小只能压缩到flexitem的内容宽度。
• 当align-items为stretch时，对于未设置高度的flexitem来说，其高度会被拉伸到flexbox的高度。

这里我们发现通过flexbox样式来控制flexitem元素的弹性是普渡众生型的，所有flexitem元素都会被影响，如果我们想让部分flexitem的宽度不被压缩，则需要针对特定的flexitem元素进行设置，此时我们需要使用flexitem专有样式flex-grow，flex-shrink，flex-basis。

另外，flexbox只会按照代码顺序来排列flexitem，这是不自由的，所以我们需要使用flexitem专有样式order来针对每个flexitem元素设置排列顺序。

还有，flexbox是通过align-items来控制所有flexitem在侧轴上的对齐，也是普渡众生型的，为了能实现特定flexitem的侧轴对齐，我们可以使用align-self，该样式的值和align-items一致，但是只作用于特定flexitem，而不是所有flexitem。

flex-grow及按比扩容

MDN官方对于flex-grow的解释是：设置flexitem主尺寸的弹性增长系数。

flexitem的主尺寸指的是flexitem在主轴方向上的尺寸，

• 比如主轴为row或row-reverse时，flexitem的主尺寸就是宽度width；
• 比如主轴为colum或colum-reverse时，flexitem的主尺寸就是高度height；

弹性增长系数，其实就是当flexbox主轴方向存在剩余空间时，设置了flex-grow的flexitem主尺寸可以分配到的剩余空间的比例。

flex-grow可是任何非负数值，默认值为0。

flex-grow按比扩容计算规则：

假设：flexbox主轴方向是row，则

剩余宽度 = flexbox宽度 - 所有flexitem原始宽度之和

flexitem占比 = flexitem的flex-grow ÷ 所有flexitem的flex-grow之和

flexitem所分得的剩余宽度 = flexitem占比 × 剩余宽度

flexitem弹性宽度 = flexitem原始宽度 + flexitem所分得的剩余宽度

剩余宽度 = 500 - (100 + 150 + 50) = 200px

blue占比 = 0 / (0 + 1 + 1) = 0

red占比 = 1 / (0 + 1 + 1) = 1/2

orange占比 = 1 / (0 + 1 + 1) = 1/2

blue所分得剩余宽度 = 0 * 200 = 0

red所分得剩余宽度 = 1/2 * 200 = 100

orange所分得剩余宽度 = 1/2 * 200 = 100

blue未扩容

red扩容后弹性宽度为 150 + 100 = 250px

orange扩容后弹性看到为 50 + 100 = 150px

flex-shrink及按权重比压缩

MDN官网对于flex-shrink的定义是： 该属性指定了flexitem的收缩规则。flexitem仅在默认宽度之和大于flexbox容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flexitem元素的flex-shrink值可以为任何非负数，默认值为1。

flex-shrink按权重比压缩计算规则：

假设：flexbox主轴方向是row，则

flexitem权重 = flexitem宽度 × flexitem的flex-shrink系数

总权重 = 所有flexitem的权重之和

flexitem权重比 = flexitem权重 ÷ 总权重

总压缩宽度 = 所有flexitem原始宽度之和 - flexbox宽度

flexitem压缩宽度 = flexitem权重比 × 总压缩宽度

flexitem弹性宽度 = flexitem原始宽度 - flexitem压缩宽度

flexitem的flex-shrink默认为1。

总权重 = (100 * 0 + 150 * 1 + 50 * 1) * 2 = 400

blue权重比 = 100 * 0 / 400 = 0

red权重比 = 150 * 1 / 400 = 3/8

orange权重比 = 50 * 1 / 400 = 1/8

总压缩宽度 = 600 - 500 = 100

blue压缩宽度 = 0 * 100 = 0

red压缩宽度 = 3/8 * 100 = 37.5

orange压缩宽度 = 1/8 * 100 = 12.5

blue未被压缩

red弹性宽度 = 150 - 37.5 = 112.5

orange弹性宽度 = 50 - 12.5 = 37.5

flex-basis

MDN官方对于flex-basis的解释是：flexitem在主轴方向上的初始大小。如果不使用box-sizing:border-box盒子模型的话，那么flex-basis指定的就是flexitem的内容区主尺寸。

如果一个flexitem元素既设置了flex-basis（非auto值），又设置了内容区主尺寸（即content-box的width、height），则flexitem的内容区尺寸以flex-basis的值为准。

flex-basis的取值如下：

• auto（默认值）
• 指定尺寸
• content

flex-basis：auto的意思是“参照我的width/height属性”，即flexitem的内容区尺寸取决于width\height。

flex-basis：content，意思是参照flexitem元素实际内容的尺寸

flex-basis：指定尺寸，意识是忽略flexitem的主尺寸width/height，以flex-basis指定的尺寸为准

另外由于flex-basis会影响flexitem的主尺寸大小，所以会影响剩余宽度计算，压缩宽度计算，即会影响flex-grow，flex-shrink。

剩余宽度 = 200 - 85 - 50 - 50 = 15px

blue扩容后宽度 = 50 + 15 = 65px

每个flexitem的flex-shrink默认为1

压缩总宽度 = flexitem原始宽度之和 - flexbox宽度 = (85 + 50 + 50) * 2 - 200 = 170

总权重 = (85 * 1 + 50 * 1 + 50 * 1) * 2 = 370

red权重比为 85 * 1 / 370

blue权重比为 50 * 1 / 370

green权重比为 50 * 1 / 370

压缩宽度 = 压缩总宽度 * 权重比

则red弹性宽度为 = 原始宽度 - 压缩宽度 = 45.95px

flex复合写法

flex-grow、flex-shrink、flex-basis可以复合写成flex样式属性。

flex：flex-grow flex-shrink flex-basis

但是flex的用法多种多样，其支持一个值，两个值，三个值的情况

对于一个值的情况

如果值为非负数字，且无单位，则该值对应flex-grow，且此时flex-shrink:1，flex-basis为0%

如果值为一个有单位的数字，则带单位的数字对应flex-basis的值，且此时flex-grow:1，flex-shrink:1

如果值为auto或content，则也对应flex-basis的值，且此时flex-grow:1，flex-shrink:1

对于两个值的情况

此时第一个值必然对应flex-grow，则只能是非负数。

第二值可以是flex-shrink，比如为非负数时，也可以时flex-basis，比如为带单位的值，auto，content。

对于三个值的情况

则必然对应 flex：flex-grow flex-shrink flex-basis

总结

order

flexitem元素还支持设置order样式来定义自身排列顺序，order值越小越靠前，order值默认为0，所以设置了正数的order的lfexitem总是显示在未设置order的flexitem后面。order还支持负数，order为负数的flexitem总是最先显示，因为它小于默认的order:0。

align-self

align-self用于给特定的flexitem进行侧轴对齐，其值基本与align-items值相同。并且flexitem的align-self会覆盖来自flexbox的align-items。

align-self的值如下：

• flex-start
• center
• flex-end
• baseline