1.7 KiB
1.7 KiB
title | localeTitle |
---|---|
Flex Property | Flex属性 |
Flex属性
flex
属性是指定灵活项目大小的简写。可以在此简写属性中指定flex-grow
, flex-shrink
和flex-basis
。
如果元素不是flex-item
则此属性无效 。 Flex项是一个元素,它是容器父项的直接子项,其显示属性为flex
或inline-flex
。
句法
下面列出的语法可能存在差异。 flex-grow
和flex-shrink
将整数作为值。 flex-basis
采用常规大小单位,如px,em,rem ......等。
flex: <flex-grow> <flex-shrink> <flex-basis>;
flex: <flex-basis>;
flex: <flex-grow>;
flex: <flex-grow> <flex-basis>;
flex: <flex-grow> <flex-shrink>;
flex-basis
指定沿主轴的元素大小。在容器内,主轴由flex-direction
定义。当flex-direction
为row
主轴是水平的。当flex-direction
为column
时垂直。
flex-basis: 20px
如果flex-direction
为row
则flex-basis: 20px
会将元素的初始宽度设置为20px
。如果fle-direction
是column
则相同的flex-basis
将适用于高度。
flex: 20px
会自动表示flex-basis: 20px
,因为速记属性只有flex-basis
作为可以取单位值的属性。
flex: 2
指定flex-grow: 2
,元素将比flex-grow: 1
其他元素长两倍/更高flex-grow: 1
。
flex: 1 2
指定flex-grow: 1
和flex-shrink: 2
。随着flex-grow: 1
元素与其他元素成比例地占据空白空间flex-grow: 1
但是与其他具有flex-shrink: 1
元素相比,缩小了两倍flex-shrink: 1
当按压空间时, flex-shrink: 1
。
更多信息
- MDN上的
flex
属性引用