定义

Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

基本概念

采用Flex布局的元素，被称为Flex容器(flex container)，简称“容器”。其所有子元素自动成为容器成员，称为Flex项目(Flex item)，简称“项目”。

容器默认存在两根轴：水平方向主轴(main axis)和垂直方向交叉轴(cross axis)，默认项目按主轴排列。（所以Flex 布局默认direction 为 row）

• main start/main end：主轴开始位置/结束位置；

• cross start/cross end：交叉轴开始位置/结束位置；

• main size/cross size：单个项目占据主轴/交叉轴的空间；

属性

正题: 项目属性 flex 是如何计算 ？

flex 属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

相关概念

• 剩余空间: 当所有Flex项目尺寸大小之和小于Flex容器时，Flex容器就会有多余的空间没有被填充，那么这个空间就被称为Flex容器的剩余空间（Positive Free Space）

• 不足空间: 当所有Flex项目尺寸大小之和大于Flex容器时，Flex容器就没有足够的空间容纳所有Flex项目，那么多出来的这个空间就被称为负空间（Negative Free Space）

首先我们先看一下 flex-basis 可以设置的值有哪些

/* Specify <'width'> */
flex-basis: 10em;     
flex-basis: 3px;
flex-basis: auto;
/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* Automatically size based on the flex item’s content */
flex-basis: content;
/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;

The flex-basis property is specified as either the keyword content or a <'width'>. 好多新的属性值，和width的 属性值 类似。

我们再次了解一下max/min-content、fit-content 及 fill-available 等width值

描述

• max-content: 假设我们的容器有足够的宽度，足够的空间，此时，所占据的宽度是就是 max-content 所表示的尺寸。

• min-content: 采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。

• fit-content: 缩小以适应

• fill-available: 自动填满剩余的空间

效果—1 max-content

效果—2 min-content