UD5工具箱
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
Flexbox 控制台
容器属性
8px
快速预设
子元素设置
生成的CSS
实时预览
5个子元素
⬌ 主轴 (Main Axis)
⬍ 交叉轴 (Cross Axis)
Flexbox 常见问题与知识点
Flexbox（Flexible Box Layout）是CSS3中的一维布局模型，专为在容器中沿主轴方向分配空间和对齐内容而设计。相比于传统的浮动（float）和定位（position），Flexbox能更优雅地处理动态尺寸、对齐和分布，特别适合组件级别的布局，如导航栏、卡片列表、居中对齐等场景。它是现代CSS布局的基石之一，与Grid布局互补——Flexbox擅长一维排列，Grid擅长二维网格。
主轴由
flex-direction决定：row时主轴水平向右，column时主轴垂直向下。justify-content始终沿主轴对齐，align-items始终沿交叉轴对齐。理解这两个轴是掌握Flexbox的关键——记住：justify=主轴，align=交叉轴。当flex-direction改变时，两个轴的角色互换。align-items设置单行内所有子元素在交叉轴上的对齐方式；align-content仅在多行（flex-wrap为wrap/wrap-reverse）时生效，控制行与行之间的间距分布。如果只有一行，align-content不产生任何效果。简单记忆：items管单行内的对齐，content管多行之间的分布。这三个属性定义了子元素的弹性伸缩行为：
flex-grow（默认0）决定元素如何分配剩余空间，值越大分得越多；flex-shrink（默认1）决定空间不足时如何收缩，0表示不收缩；flex-basis（默认auto）定义元素在分配空间前的初始尺寸。常用简写flex: 1 1 auto表示可增长可收缩。使用
display:flex; justify-content:center; align-items:center;即可在容器内水平和垂直居中子元素。这是Flexbox最经典的用例之一，比传统的margin:auto加line-height方案简洁得多，且适用于任意数量的子元素。Flexbox适合一维布局（单行或单列的元素排列），如导航菜单、工具栏、卡片横向排列；Grid适合二维布局（同时控制行和列），如页面整体布局、仪表盘、杂志排版。实际开发中两者常结合使用：页面级用Grid，组件级用Flexbox。
gap（原名grid-gap）在现代浏览器中已全面支持Flexbox，用于设置子元素之间的间距，比使用margin更简洁且不会产生多余的边距。可使用gap统一设置，也可分别用row-gap和column-gap设置。兼容性方面，Chrome 84+、Firefox 63+、Safari 14.1+均支持。flex-wrap控制子元素是否换行。默认nowrap下所有元素挤在一行，可能溢出；设为wrap后，超出容器宽度的元素会自动换到下一行，配合align-content可控制多行间距。wrap-reverse则反向换行（从下往上排列）。响应式布局中wrap非常实用。Flexbox在现代浏览器中支持率超过99%，包括Chrome、Firefox、Safari、Edge。IE11存在部分bug（如flex-basis和min-height问题），但IE已基本退出市场。对于需要兼容极旧浏览器的项目，可使用
@supports检测或提供float降级方案。gap属性在Flexbox中的支持稍晚，但当前主流浏览器均已支持。设置body为
display:flex; flex-direction:column; min-height:100vh;，主内容区设置flex:1，即可让页脚始终位于页面底部（内容少时）或被内容推到底部（内容多时）。这是经典的"Sticky Footer"解决方案，比传统方案更简洁可靠。CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
Flexbox属性速查 - 可视对照表
可视化Flexbox容器和子项的所有属性及选项，鼠标悬停预览效果。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
手风琴组件生成器 - 折叠面板HTML/CSS代码
在线生成可折叠的手风琴面板，自定义标题、内容与图标，支持纯CSS或简单JS切换。
CSS Grid 可视化速查表 - 所有属性一览
将 CSS Grid 容器和项目的属性以图形化卡片展示，点击查看具体效果和代码。
CSS shape-outside 环绕效果演示 - 文字绕图排列
上传浮动图片并选择圆形、椭圆或多边形 shape-outside 值，观察文字环绕效果。
CSS 系统颜色演示 - Canvas/Window/Highlight 等
展示 CSS 系统颜色关键字（如 CanvasText, LinkText）在明暗模式下的实际渲染值。
@property 规则演示 - 自定义属性类型与动画
注册带类型的 CSS 自定义属性，观察其如何支持过渡动画和继承效果。
范围滑块预设集 - 复制各种风格range CSS
展示多种风格的<input type=range>样式，一键复制定制代码。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
CSS选择器构造器 - 基于关系和属性构建
通过勾选元素关系（子孙、兄弟）、属性、伪类等条件，自动生成精确的CSS选择器字符串。
CSS 作用域演示 - Shadow DOM 样式隔离效果
创建 Shadow DOM 与普通 DOM 元素，对比样式隔离效果，理解 @layer 和 scoped styles。
贝塞尔缓动函数调校工具 - 自定义动画曲线
拖拽两控制点精细微调CSS `cubic-bezier()` 曲线并对比预设函数效果。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
Cypress 测试场景构建器 - 点选生成测试代码
可视化选择操作（访问、点击、断言等），自动生成 Cypress 测试代码。
跳跃表可视化器 - 插入/搜索层级演示
随机可视化Skip List的层级结构和快速查找过程，对比链表效率。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。
纯CSS暗黑模式切换 - checkbox黑客实现
利用隐藏的checkbox和CSS兄弟选择器实现无需JS的暗黑/明亮主题切换。
JSON 结构树浏览器 - 交互展开与路径复制
粘贴JSON对象，生成可折叠的树形视图，点击节点复制其键值路径，方便调试。
骨架屏代码生成器 - 加载占位灰色块
为内容区域生成灰色闪烁的骨架屏占位代码，包含卡片、标题等组件样式。
CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。
CSS 自定义属性演练场 - 动态修改 var() 看效果
定义多个 CSS 自定义属性，通过滑块或颜色选择器实时修改并查看页面整体风格变化。
范围滑块样式生成器 - 自定义input range外观
可视化配置范围滑块的轨道、滑块、填充颜色，生成跨浏览器的CSS代码。
微前端在线组合器 - 集成多个子应用到同一页面
通过 iframe 或 Web Components 将多个独立前端应用组合到同一个页面，展示微前端概念。
HTML转JSX工具 - React组件代码转换
将普通HTML标记转换为符合JSX语法的代码，自动处理class→className、行内样式对象化等。
Catmull-Clark 细分曲面演示 - 控制网格迭代
载入简单控制网格，执行 Catmull-Clark 细分一次，观察光滑效果。