freeCodeCamp

1.7 KiB

Raw Blame History

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 。

1.7 KiB Raw Blame History Unescape Escape

Flex属性

句法

更多信息

1.7 KiB

Raw Blame History