flex

描述

该 flex 属性是一个速记属性，允许您指定元素的参数，以便它有效地填充可用空间。元素可以按比例拉伸，考虑到给定的比例，也可以压缩，以完全容纳所有元素，而无需在一行中使用连字。各个属性包括：flex-grow, flex-shrink, flex-basis

效果展示

语法

flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis>];

值

• none 对应于 flex 的值：0 0 auto;
• auto 对应于 flex 的值：1 1 auto;
• initial 将属性设置为默认值。对应于 flex 的值：0 1 auto;
• inherit 指示值继承自父元素。
• flex-grow 一个数字，指示块相对于容器中的其余 flex 元素将增加多少。不允许使用负值。默认值为 0。
• flex-basis 在容器中分配空间之前定义 flex 元素的默认大小。不允许使用负值。大小以 CSS 单位（px，em，pt 等）表示，或者由浏览器根据元素的内容自动计算。默认值为 auto。
• flex-shrink 一个数字，指示相对于容器中的其他 flex 元素（缺少可用空间），块将减少多少。不允许使用负值。默认值为 1。