Flex 是 Flexible Box 的缩写，是CSS3中的一种布局模式，旨在提供一种更加高效、灵活的方式来布置、对齐和分配容器中项目之间的空间。意为"弹性布局"，用来为盒状模型提供最大的灵活性。Flexbox 包含 flex 容器和 flex 成员项，为支持跨平台，框架建议使用 Flex 布局
备注：在 nvue中，Flexbox 是默认且唯一的布局模型，所以你不需要手动为元素添加 display: flex; 属性
为更直观表述 flex，下面的图片以供参考 高清下载地址： css-flexbox
一、属性
flex-direction
定义了 flex 容器中 flex 成员项的排列方向，默认值为 column
效果图：
flex-wrap
决定了 flex 成员项在一行还是多行分布，默认值为nowrap
效果图
justify-content
定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。默认值为 flex-start
效果图
align-items
定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。默认值为 stretch。
效果图
align-content
定义了浏览器如何在 flex 容器中，按照"交叉轴"的方向去分配每个 flex 元素之间以及与 flex 容器之间的空间。
效果图
flex-shrink,flex-grow, flex-basis
是控制 Flex 项目（flex items）如何分配容器空间的三个核心属性。它们通常通过 flex 简写属性一起设置，但也可以单独使用
效果图
align-self
align-self 是一个用于控制单个 Flex 项目在交叉轴上对齐方式的属性。它是 align-items 的单个项目版本，允许覆盖容器级别的对齐设置，实现更精细的布局控制。
效果图
order
order 属性规定了 flex 元素在 flex 容器中布局时的顺序。在未设置任何 order 属性值或者设置了相同的 order 属性值时，会以元素在 dom 节点中出现的顺序进行布局；而如果我们修改了 order 的属性值，就将会以递增的方式排序，数字越大，flex 元素就排得越后面。order 属性仅仅只是将 flex 元素在页面展示时的视觉效果做了位置的调整，并不会改变其自身在 dom 节点的位置以及顺序。属性值可以为负值，只要是整数就可以了 ,order 的理解相对简单很多，就是看哪个数值大，越大越往后排就好了
效果图
二、快速学习技巧
Flexbox Froggy 游戏化学习 Flex 属性
CSS-Tricks Flex Guide 速查表和示例。
总结
先掌握容器和项目的核心属性，再通过实践熟悉常用布局模式