UD5工具箱
什么是Flexbox？
Flexbox（弹性盒布局）是CSS3中的一种布局模式，旨在提供一种更高效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小是未知或动态的。它特别适用于一维布局（行或列），能够轻松实现各种复杂的页面布局效果。
主轴和交叉轴有什么区别？
主轴是Flex项目排列的方向，由flex-direction属性决定，默认是水平方向（从左到右）。交叉轴是与主轴垂直的轴线，如果主轴是水平的，交叉轴就是垂直的。理解这两个轴的概念对于正确使用对齐属性（如justify-content控制主轴对齐，align-items控制交叉轴对齐）至关重要。
align-items和align-content有什么不同？
align-items控制所有Flex项目在交叉轴上的对齐方式，适用于单行布局。而align-content控制多行Flex项目在交叉轴上的对齐方式，只有当flex-wrap属性设置为wrap或wrap-reverse时才生效。简单来说，align-items处理单行对齐，align-content处理多行之间的间距和对齐。
如何用Flexbox实现完美居中？
使用Flexbox实现完美居中的方法很简单：在父容器上设置display: flex; justify-content: center; align-items: center;。这样可以使子元素在水平和垂直方向上都居中。这是Flexbox最常用的技巧之一，适用于各种需要居中显示的场景。
flex-grow、flex-shrink和flex-basis分别是什么？
flex-grow定义项目的放大比例，默认为0，表示不占用剩余空间；数值越大，占用的剩余空间比例越大。flex-shrink定义项目的缩小比例，默认为1，表示空间不足时会缩小；设为0则不缩小。flex-basis定义分配多余空间前项目占据的主轴空间，默认为auto，即项目本来大小。这三者通常配合使用，或通过flex简写属性一次性设置。
Flexbox和Grid应该选择哪个？
选择取决于布局需求：Flexbox更适合一维布局（单行或单列），如导航栏、按钮组、简单卡片排列等。Grid更适合二维布局（同时控制行和列），如复杂的页面整体布局、网格系统等。两者可以结合使用，例如用Grid做整体页面布局，用Flexbox处理组件内部的对齐和分布。
gap属性如何使用？
gap属性用于设置Flex项目之间的间距，可以替代传统的margin实现更简洁的间距控制。用法为gap: 10px;（同时设置行和列间距）或gap: 10px 20px;（分别设置行间距和列间距）。该属性在flex-wrap: wrap时特别有用，可以避免外边距折叠问题，是Flexbox布局中推荐使用的间距控制方式。
什么是flex-wrap？它有什么作用？
flex-wrap属性控制Flex项目是否换行，默认值nowrap表示不换行，所有项目会在一行内排列，可能导致项目被压缩。设置为wrap时，如果一行空间不足，项目会换到下一行。wrap-reverse则会反向换行。使用flex-wrap可以创建更灵活的多行布局，特别适合响应式设计。
Flexbox的浏览器兼容性如何？
现代浏览器对Flexbox的支持已经非常完善，所有主流浏览器（Chrome、Firefox、Safari、Edge）的最新版本都完全支持Flexbox。对于需要支持旧版浏览器的项目，可能需要添加前缀（如-webkit-）或使用回退方案。建议使用Can I Use网站查询具体的兼容性数据。
如何用Flexbox实现粘性页脚？
使用Flexbox实现粘性页脚的步骤：首先设置body为Flex容器（display: flex; flex-direction: column; min-height: 100vh;），然后为主内容区域设置flex: 1;使其自动填充剩余空间，页脚自然会被推到底部。这种方法简单有效，是实现粘性页脚的推荐方式。