flex: flex-grow flex-shrink flex

弹性盒模型

WeChat2a8521fe8b3585d8367cb95907bd9a48.jpg

.box{
    height: 600rpx;
    width: 300px;
    border:  1rpx solid #333;
    display: flex;
}

当主轴为 X轴时, 主轴高度自适应字体内容的宽度,侧轴则会拉伸

---

WeChatb70dc2f1a4ed1796f75dcb472e8842b7.jpg

.box{
        height: 600rpx;
        width: 300px;
        border:  1rpx solid #333;
        display: flex;
        flex-direction: column;
    }

当主轴为 Y 轴时,同样 主轴高度自适应字体内容的高度,侧轴则被拉伸

flex

flex: flex-grow flex-shrink flex-basis

• flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

单值语法: flex: 1;

值必须为以下其中之一:

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

双值语法: flex: 1 1 或 flex: 1 100rpx

第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

• 一个无单位数：它会被当作 [<flex-shrink>] 的值。
• 一个有效的宽度值: 它会被当作 [<flex-basis>] 的值。

三值语法: flex: 1 1 100rpx

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

取值节：

initial紧身衣 与none区别在于会缩短自身以适应 flex 容器
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。

auto自适应会收缩
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".

none固定值
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
当initial和none没有内容时，不会展示也就是flex-grow设为0；

<'flex-grow'> 除了子元素宽度之和还有剩余空间 -> 子元素拉伸

定义 flex 元素的 flex-grow 属性，该属性定义弹性盒子项（flex item）的拉伸因子。默认值为 0，负值无效。

<'flex-shrink'> 子元素之和要大于父元素宽度 -> 子元素收缩

定义 flex 元素的 flex-shrink属性该属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。默认值为1，负值无效。

<'flex-basis'>

• 定义 flex 元素的 flex-basis属性；该属性指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小。则必须加上单位，以免被视作伸缩性。 默认值为 auto。
• 当使用一个或两个无单位数时, flex-basis会从auto变为0.

查看 flex 等效