css属性之flex属性

时间：2021-11-07 00:59:02

flex属性

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

/* Basic values */

flex: auto;   相当于flex:   auto;

flex: initial;  相当于flex:   auto;

flex: none;   相当于flex:   auto;

flex: ;

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

flex: ;

/* One value, width/height: flex-basis */

flex: 10em;

flex: 30px;

/* Two values: flex-grow | flex-basis */

flex:  30px;

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

flex:  ;

/* Three values: flex-grow | flex-shrink | flex-basis */

flex:   %;

/* 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;

相关文章