UD5工具箱
Flex 容器（Flex Container）
设置了 display: flex 或 display: inline-flex 的元素即成为 Flex 容器。容器内的所有直接子元素自动成为 Flex 项目。容器的属性决定了子项的排列方向、对齐方式和间距分布。在本工具中，预览区域的外层方框即代表 Flex 容器。
Flex 项目（Flex Item）
Flex 容器的直接子元素称为 Flex 项目。每个项目可以独立设置 flex-grow、flex-shrink、flex-basis、align-self 和 order 等属性。在本工具中，预览区域内的彩色方块即为 Flex 项目，点击方块可选中并编辑其属性。
主轴（Main Axis）
Flex 布局中的主要排列方向轴。主轴的方向由 flex-direction 属性决定：当值为 row 或 row-reverse 时主轴为水平方向，当值为 column 或 column-reverse 时主轴为垂直方向。justify-content 属性控制项目沿主轴的对齐和分布方式。
交叉轴（Cross Axis）
与主轴垂直的轴线。交叉轴的方向始终与主轴正交：主轴为水平时交叉轴为垂直，反之亦然。align-items 和 align-content 属性分别控制单行和多行场景下项目沿交叉轴的对齐方式。
flex-direction
定义主轴方向和项目排列顺序的容器属性。可选值包括 row（从左到右）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）。该属性是理解 Flexbox 布局逻辑的起点。
flex-wrap
控制当项目总宽度超出容器时是否换行。nowrap（默认值）强制所有项目在一行内排列并可能压缩；wrap 允许换行并按从上到下排列新行；wrap-reverse 允许换行但新行向上排列。
justify-content
控制项目沿主轴方向的对齐和间距分布。常用值包括 flex-start（起点对齐）、flex-end（终点对齐）、center（居中）、space-between（两端对齐，中间等距）、space-around（每个项目两侧等距）和 space-evenly（所有间距完全相等）。该属性是日常开发中使用频率最高的 Flexbox 属性之一。
align-items
控制单行项目沿交叉轴方向的对齐方式。stretch（默认值）使项目拉伸填满交叉轴空间；flex-start、flex-end、center 分别对应起点、终点和居中对齐；baseline 使项目按文字基线对齐。
align-content
当项目发生换行产生多行时，控制各行沿交叉轴方向的对齐和间距分布。属性值与 justify-content 类似，但仅在多行布局中生效。单行布局下该属性无效。
gap / row-gap / col-gap
gap 属性设置项目之间的间距，可简写为同时设置行间距和列间距，也可通过 row-gap 和 col-gap 分别控制。该属性不会影响项目本身的尺寸，只在项目之间产生间隙。
flex-grow
定义项目的放大比例。默认值为 0 表示不放大；设为 1 时项目会瓜分容器中的剩余空间；数值越大分配到的空间越多。例如两个项目的 flex-grow 分别为 1 和 2，则后者获得的空间是前者的两倍。
flex-shrink
定义项目的缩小比例。默认值为 1 表示空间不足时按比例缩小；设为 0 表示不缩小。该属性在容器空间不足以容纳所有项目时决定各项目缩减的程度。
flex-basis
分配多余空间之前项目占据的主轴空间。默认值 auto 表示项目尺寸由内容决定，也可以设置为具体数值如 100px 或百分比。它与 width 或 height 的区别在于 flex-basis 会参与 Flex 布局的空间分配计算。
align-self
允许单个项目覆盖容器的 align-items 设置，单独指定自己在交叉轴上的对齐方式。可选值与 align-items 相同，默认 auto 表示继承容器的 align-items 值。
order
定义项目的排列顺序。默认值为 0，数值越小越靠前。通过设置不同 order 值可以在不改变 DOM 结构的前提下改变项目的视觉排列顺序。