盒模型

盒模型

弹性盒模型

display：flex/inline-flex

Flex 盒模型由主轴row和交叉轴column决定默认 水平方向为主轴，垂直方向为交叉轴

父级设置

flex-direction

改变主轴和交叉轴 默认值为 row

row、row-reverse、column、column-reverse

flex-wrap

换行 默认值为 nowrap

align-items

主要是针对单行文本进行居中

align-content

主要是针对多行文本进行居中

子集设置（设置到子盒子）

order

对比 order 的值，小的排在前面。

align-self

同 align-item 但是优先级比 align-items 高，但是如果父级设置的是 align-content 那么 align-self将不会生效。

flex-grow

如果同一行存在剩余空间，将会按照 flex-grow 设置的比例进行分配。

假设有一个盒子存在 300px 的剩余。有三个子盒子

当我同时给子盒子设置 flex-grow:1 此时比例为 1:1:1 平分为三份 一份 100px。

当我单独给盒子设置比例为 1:2:3 的时候此时，共6份 1=50px 2=100px 3=150px

flex-shrink

超出父盒子宽度的部分，按照 flex-shrink 的值进行缩减。

子项宽度相同：

假设父盒子宽度 300px 子盒子宽度 200px ， flex-shrink:1 ，超出父级的宽度为 300 - 200 * 3 为 300px

每个盒子的比例相同，那么计算为 300 / 3

子项宽度不同：

假设父盒子宽度 300px 子盒子 一、二 的宽度均为 100px ，子盒子三的宽度为 200px，flex-shrink 为 1、1、2

那么他们缩减的方式为：

仅超出父盒子宽度 100px，计算公式为 (flex-shrink 的值 * 盒子宽度 / 每个盒子宽度 * 它对应的flex-shrink值) * 超出盒子的宽度。

盒子的宽度标准盒模型下为 padding * 2 + border * 2 + width，怪异盒模型为 width - padding * 2 - border * 2.

• 超出盒子 ：100px
• 每个盒子的宽度 * flex-shrink ：100 *1 + 100 * 1 + 200 * 2 = 600

即：第一个盒子的缩减为： 100/600 * 100

​ 第二个盒子的缩减为：100/600 * 100

​ 第三个盒子的缩减为：200 * 2 / 600 * 100.

flex-basis

basis 本意是用来取代flex盒子模型中子项的 width即子项的 flex-basis 的优先级大于width

• 如果只写 basis 那么代表盒子的最小宽度为 basis，此时盒子的宽度能够随着内容区增大
• 如果设置了 basis 和 width，且 basis 小于 width，那么代表盒子的最小宽度为 basis，最大宽度为 width。

flex

是由 flex-grow、flex-shrink、flex-basis 结合的一个复合属性。