1.9 KiB
1.9 KiB
title, localeTitle
title | localeTitle |
---|---|
Flex Basis Property | Flex Basis Property |
Flex基础
flex-basis
属性定义沿Flex容器主轴的flex flex-item
的大小。如果flex-direction
设置为row
,则主轴为水平,如果flex-direction
flex-direction
属性设置为column
,则主轴为垂直轴。
句法
flex-basis: auto | content | <width> | <height>;
flex-basis:auto
flex-basis: auto
查找元素的主要大小并定义大小。例如,在水平Flex容器上,如果容器轴是垂直的, auto
将查找width
和height
。
如果未指定大小,则auto
将回退到content
。
flex-basis:内容
flex-basis: content
根据元素的flex-basis: content
解析大小,除非通过正常的box-sizing
设置width
或height
。
在flex-basis
为auto
或content
,如果指定了main size,则该大小将优先。
柔性基础:
这与指定width
或height
,但只是更灵活。 flex-basis: 20em;
将元素的初始大小设置为20em
。它的最终尺寸将基于可用空间, flex-grow
multiple和flex-shrink
multiple。
该规范建议使用flex
速记属性。这有助于编写flex-basis
以及flex-grow
和flex-shrink
属性。
例子
这里是各行柔性容器和各个柔性元件的行,显示flex-basis
如何影响box-sizing
。
当flex-direction
为column
,相同的flex-basis
将控制height
属性。下面的例子,
更多信息:
以下页面的其他参考: