Files
freeCodeCamp/guide/chinese/css/layout/flexbox/flex-basis-property/index.md
2018-10-16 21:32:40 +05:30

1.9 KiB
Raw Blame History

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-basisauto

flex-basis: auto查找元素的主要大小并定义大小。例如在水平Flex容器上如果容器轴是垂直的 auto将查找widthheight

如果未指定大小,则auto将回退到content

flex-basis内容

flex-basis: content根据元素的flex-basis: content解析大小,除非通过正常的box-sizing设置widthheight

flex-basisautocontent 如果指定了main size则该大小将优先。

柔性基础:

这与指定widthheight ,但只是更灵活。 flex-basis: 20em;将元素的初始大小设置为20em 。它的最终尺寸将基于可用空间, flex-grow multiple和flex-shrink multiple。

该规范建议使用flex速记属性。这有助于编写flex-basis以及flex-growflex-shrink属性。

例子

这里是各行柔性容器和各个柔性元件的行,显示flex-basis如何影响box-sizing

柔性基础对横轴的影响

flex-directioncolumn ,相同的flex-basis将控制height属性。下面的例子,

基于柔性基础控制垂直容器中的高度的示例

更多信息:

以下页面的其他参考: