css属性之flex属性

flex属性

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

/* Basic values */
flex: auto;   相当于flex: 1 1 auto;
flex: initial;  相当于flex: 0 1 auto;
flex: none;   相当于flex: 0 0 auto;
flex: 2;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;

语法

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

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

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

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

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

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

三值语法：

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

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

flex-grow

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

flex-shrink

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

初始值为1，负值无效

flex-basis

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

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

取值

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

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

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/* Automatically size based on the flex item’s content */
flex-basis: content;

/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;