Flex
flex CSS 简写属性设置了弹性项目如何增大或缩小以适应其弹性容器中可用的空间。
语法
| Class | 属性 |
|---|---|
| flex-auto | flex: auto; |
| flex-initial | flex: initial; |
| flex-none | flex: none; |
| flex-[1~12] | flex: [1~12]; |
示例
flex-auto
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".
flex-initial
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。
flex-none
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
flex-[1~12]
flex-[1~12] 是指有 1 至 12 数之间这么多个 Class 样式，如：flex-1 flex-2 flex-3 ...... flex-11 flex-12
flex-1 等价于 flex-grow:1; flex-shrink:1; flex-basis:0%;flex-2 等价于 flex-grow:2; flex-shrink:2; flex-basis:0%;