css属性之flex属性

规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。是一个简写属性，可以同时设置flex-grow,flex-shrink,flex-basis三个子属性。

<span style="color: #008000">/<span style="color: #008000"> One value,unitless number: flex-grow <span style="color: #008000">/<span style="color: #000000">
flex: <span style="color: #800080">2<span style="color: #000000">;

<span style="color: #008000">/<span style="color: #008000"> One value,width/height: flex-basis <span style="color: #008000">/<span style="color: #000000">
flex: 10em;
flex: 30px;

<span style="color: #008000">/<span style="color: #008000"> Two values: flex-grow | flex-basis <span style="color: #008000">/<span style="color: #000000">
flex: <span style="color: #800080">1<span style="color: #000000"> 30px;

<span style="color: #008000">/<span style="color: #008000"> Two values: flex-grow | flex-shrink <span style="color: #008000">/<span style="color: #000000">
flex: <span style="color: #800080">2 <span style="color: #800080">2<span style="color: #000000">;

<span style="color: #008000">/<span style="color: #008000"> Three values: flex-grow | flex-shrink | flex-basis <span style="color: #008000">/<span style="color: #000000">
flex: <span style="color: #800080">2 <span style="color: #800080">2 <span style="color: #800080">10%<span style="color: #000000">;

<span style="color: #008000">/<span style="color: #008000"> Global values <span style="color: #008000">/<span style="color: #000000">
flex: inherit;
flex: initial;
flex: unset;

语法

flex属性可以指定1个，2个或三个值。

单值语法： 值必须为以下其中之一：

• 一个无单位数（）：它会被当作的值。
• 一个有效的宽度（width）的值：它会被当作的值。
• 关键字none,auto,或initial.

1. none： 元素会根据自身宽高来设置尺寸。它是完全非弹性的，既不会缩短，也不会伸长来适应flex容器。相当于将属性设置为"flex: 0 0 auto"。
2. auto：元素会根据自身的宽度与高度来确定尺寸，但是会自行伸长以吸收flex容器中额外的自由空间，也会缩短至自身最小尺寸以适应容器。这相当于将属性设置为"flex: 1 1 auto".
3. initial：属性默认值，元素会根据自身宽高设置尺寸。它会缩短自身以适应容器，但不会伸长并吸收flex容器中的额外自由空间来适应容器。相当于将属性设置为"flex: 0 1 auto"。

双值语法：第一个值必须为一个无单位数，并且它会被当作的值。第二个值必须为以下之一：

• 一个无单位数：它会被当作的值。
• 一个有效的宽度值： 它会被当作的值。

三值语法：

• 第一个值必须为一个无单位数，它会被当作的值，默认值为1。
• 第二个值必须为一个无单位数，它会被当作的值，默认值为1。
• 第三个值必须为一个有效的宽度值，它会被当作的值，初始值：auto。

默认情况下，元素不会缩短至小于内容框尺寸，若想改变这一状况，请设置元素的min-width与min-height属性。

定义弹性盒子项（flex item）的拉伸因子。初始值0，负值无效

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

初始值为1，负值无效

指定了flex元素在主轴方向上的初始大小。如果不使用box-sizing来改变盒模型的话，那么这个属性就决定了flex元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。默认值0%

； 是否是继承属性: 否；值类型：a length,百分比 或calc()

取值

<'width'>： width值可以使一个数字后面跟着绝对单位例如px,mm,pt; 该值也可以使一个百分数，那么这个百分数就是相对于其父弹性盒容器的宽或者高（取决于主轴方向），负值是不被允许的。

content：基于flex的元素自动调整大小。

---<span style="color: #008000">/<span style="color: #008000"> Intrinsic sizing keywords <span style="color: #008000">/<span style="color: #000000">
flex-<span style="color: #000000">basis: fill;
flex-basis: max-<span style="color: #000000">content;
flex-basis: min-<span style="color: #000000">content;
flex-basis: fit-<span style="color: #000000">content;

<span style="color: #008000">/<span style="color: #008000"> Automatically size based on the flex item’s content <span style="color: #008000">/<span style="color: #000000">
flex-<span style="color: #000000">basis: content;

<span style="color: #008000">/<span style="color: #008000"> Global values <span style="color: #008000">/<span style="color: #000000">
flex-<span style="color: #000000">basis: inherit;
flex-<span style="color: #000000">basis: initial;
flex-basis: unset;