你可能会说
这几个元素怎么水平排列、垂直居中？我调了半天 margin 都不对。
Flexbox 是 CSS 一维布局系统——让子元素沿一行或一列灵活排列，轻松实现居中、等分、对齐。
一种 CSS 排版方式。让元素能自动排列、对齐、分配空间。不用再手动算每个东西该放在哪个像素位置。
生活类比
像书架上的书——你只需要说「靠左排列、间距均匀」，书就自动排好了。
🎮 动手试试
👇 切换属性值，观察布局变化
让 Flex 子元素在主轴上两端对齐，应该用？
你可以这样告诉 AI
帮我把这三个卡片用 Flexbox 水平排列，等间距，小屏自动换行，垂直方向居中对齐。
Flexbox 是一维（一行或一列），Grid 是二维（行+列同时控制）。简单排列用 Flex，复杂网格用 Grid。
Float 是古老的布局hack，Flexbox 是现代方案，更灵活、无清除浮动问题。
导航栏
Logo 在左、菜单在右、垂直居中
卡片排列
一行多个卡片等间距排列
垂直居中
让内容在容器中完美居中
二维网格
需要同时控制行和列的复杂布局用 Grid 更直观
大量元素换行
几十个元素的瀑布流用 Grid 或 Masonry 更合适
设置 display:flex 的父元素
子元素排列的方向（默认水平），由 flex-direction 决定
控制子元素在主轴上的分布：center、space-between
控制子元素在垂直方向的对齐：center、stretch