UD5工具箱
Flexbox术语表
在使用Flexbox布局生成器时，你会遇到许多专业术语。理解这些概念有助于更精确地控制布局效果，生成符合需求的代码。以下是Flexbox相关的核心术语详解。
基础概念
弹性盒（Flex Container）
设置display: flex或display: inline-flex的元素，成为弹性盒容器。所有直接子元素自动成为弹性项（flex items），按照Flexbox规则排列。弹性盒定义了布局的方向、对齐和分布规则。
主轴（Main Axis）
弹性项排列的方向，由flex-direction决定。row模式下主轴水平从左到右，column模式下主轴垂直从上到下。主轴是Flexbox布局的核心概念，justify-content始终控制主轴方向上的对齐。
交叉轴（Cross Axis）
与主轴垂直的方向。row模式下交叉轴垂直，column模式下交叉轴水平。align-items和align-self控制交叉轴方向上的对齐。交叉轴始终与主轴垂直，两者共同定义了二维布局空间。
容器属性
flex-direction
定义主轴方向。row（水平从左到右，最常用）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）。改变主轴方向后，所有对齐属性的含义会随之改变。
flex-wrap
控制子项是否换行。nowrap（默认，不换行，子项可能被压缩）、wrap（换行，子项保持原始大小）、wrap-reverse（反向换行）。当子项总宽度超过容器时，nowrap会导致子项缩小，wrap会换行显示。
justify-content
控制子项在主轴上的对齐与分布。flex-start（起点对齐）、flex-end（终点对齐）、center（居中）、space-between（两端对齐）、space-around（均匀分布）、space-evenly（等间距分布）。是Flexbox最常用的对齐属性。
align-items
控制所有子项在交叉轴上的对齐方式。stretch（拉伸填充，最常用）、flex-start（起点对齐）、flex-end（终点对齐）、center（居中）、baseline（基线对齐）。与justify-content配合使用，可实现任意方向的对齐。
align-content
仅在多行（flex-wrap: wrap）时生效，控制多行在交叉轴上的分布。属性值与justify-content类似。单行布局时该属性无效。
子项属性
flex-grow
控制子项如何分配容器中的剩余空间。0表示不增长（保持原始大小），1表示等分剩余空间，数值越大分配越多。例如两个子项flex-grow分别为1和2，第二个获得的剩余空间是第一个的两倍。
flex-shrink
控制空间不足时子项的收缩比例。0表示不收缩（保持原始大小，可能溢出），1表示等比例收缩（默认值）。数值越大收缩越多。与flex-grow相反，flex-shrink控制的是空间不足时的行为。
flex-basis
子项的初始尺寸，在分配剩余空间之前。auto表示根据内容和width属性决定，也可设为具体值如200px。flex-basis与width的区别：flex-basis在Flexbox上下文中更优先，width是通用属性。
align-self
单独设置某个子项在交叉轴上的对齐方式，覆盖align-items。auto表示继承align-items的值，其他属性值与align-items相同。用于特殊子项需要不同于其他子项的对齐时。