flexbox

弹性基础 (Flex Basis)

The flex-basis property defines the size of the flex-item along the main axis of the flex container. The main axis is horizontal if flex-direction is set to row and it’ll be vertical if the flex-direction property is set to column.

flex-basis属性定义沿flex容器的主轴的flex-item的大小。如果flex-direction设置为row ，则主轴为水平轴；如果flex-direction属性设置为column ，则主轴为垂直轴。

句法 (Syntax)

flex-basis: auto | content | <width> | <height>;

flex-basis：自动 (flex-basis: auto)

flex-basis: auto looks up the main size of the element and defines the size. For example, on a horizontal flex container, auto will look for width and height if the container axis is vertical.

flex-basis: auto查找元素的主要尺寸并定义尺寸。例如，在水平伸缩容器上，如果容器的轴是垂直的，则auto将查找width和height 。

If no size is specified, auto will fall back to content.

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

flex-basis：内容 (flex-basis: content)

flex-basis: content resolves the size based on the element’s content, unless width or height is set through normal box-sizing.

flex-basis: content除非元素的width或height是通过常规box-sizing设置的，否则content会根据元素的flex-basis: content解析box-sizing 。

In both the cases where flex-basis is either auto or content, if main size is specified, that size will take priority.

在flex-basis是auto或content两种情况下，如果指定了main size，则以该大小flex-basis 。

flex-basis： (flex-basis:)

This is just as specifying width or height, but only more flexible. flex-basis: 20em; will set the initial size of the element to 20em. Its final size will be based on available space, flex-grow multiple and flex-shrink multiple.

就像指定width或height ，但是更加灵活。 flex-basis: 20em; 将元素的初始大小设置为20em 。其最终大小将取决于可用空间， flex-grow倍数和flex-shrink倍数。

The specification suggests use of flex shorthand property. This helps write flex-basis along with flex-grow and flex-shrink properties.

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

例子 (Examples)

Here is rows of individual flex containers and individual flex elements showing how flex-basis affects the box-sizing.

这是单个flex容器和单个flex元素的行，它们显示flex-basis如何影响box-sizing 。

When the flex-direction is column, the same flex-basis will control the height property. You can see it in the example below:

当flex-direction为column ，相同的flex-basis将控制height属性。您可以在以下示例中看到它：

更多信息： (More Information:)

You can fund additional references about the flex basis property on the following pages:

您可以在以下页面上为有关弹性基准属性的其他参考提供资金：

CSS specification level 1

CSS规范级别1
Mozilla Developer Network page on flex-basis

flex-basis上的 Mozilla开发人员网络页面

有关Flexbox的更多信息： (More info on Flexbox:)

CSS Flexbox tips and tricks

CSS Flexbox提示和技巧
Flexbox - the ultimate cheatsheet

Flexbox-终极备忘单

翻译自: https://www.freecodecamp.org/news/flex-basis-property-in-flexbox/