1.7 KiB
1.7 KiB
title, localeTitle
| 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属性引用