Tailwind CSS: Flex

flex-none的基本使用特点

使用 flex-none 来防止一个 flex 项目扩展或收缩。

使用 flex-none 确实意味着给定的宽度（或高度）是多少就是多少。

• flex-none 设置一个 flex 项目为不能扩展或收缩，这样项目将保持其定义的大小。

• 无论容器中有多少剩余空间或多么紧凑，使用 flex-none 的项目都不会改变其初始大小。

在下图中“01”“02”宽度固定为14和32，不能扩展和收缩。

flex-initial的基本使用特点

使用 flex-initial 来允许一个 flex 项目收缩但不扩展，考虑其初始大小。

flex 项目收缩但不扩展：项目可以根据容器的剩余空间来缩小自身的大小，但是不会根据容器的可用空间来扩展自身的大小。

如图：在“01”宽度为固定的14，“02”“03”即使后面存在多余的空白区域，也不能扩展。

考虑其初始大小：意味着即使项目在进行伸缩时可以缩小，但其初始大小会被考虑进计算，以保持与其他项目相对的初始比例或大小。

如图：在“02”“03”保持宽度为64:32（即1:2）的比例不变。

flex-1的基本使用特点

使用 flex-1 使一个 flex 项目根据需要扩展和收缩，忽略其初始大小。

flex 项目根据需要扩展和收缩：“01”块宽度为固定的14，“02”“03”宽度根据空间需要自行扩展。

忽略其初始大小：“02”“03”的比例并未按初始比例等比例放大，而是根据需要自行扩展。

flex-auto的基本使用特点

使用 flex-auto 使一个 flex 项目根据需要扩展和收缩，并考虑其初始大小。

flex 项目根据需要扩展和收缩：“01”块宽度为固定的14，“02”“03”宽度根据空间需要进行扩展。

考虑其初始大小：意味着即使项目在进行伸缩时可以缩小，但其初始大小会被考虑进计算，以保持与其他项目相对的初始比例或大小。

如图：在“02”“03”保持宽度为64:32（即1:2）的比例不变。