浮动曾经承担了不该由它来完成的使命——通过脱离文档流产生的副作用来构建导航、分栏以及卡片排列等结构，由此产生了严重的塌陷问题、清除浮动、基线偏移等一系列兼容性问题。CSS3弹性盒子把这件事情又交到了布局引擎手中：声明一个容器之后，子元素就会按照轴系自动分配空间并对齐。
只有两个方向：主方向和副方向，主方向用flex-direction来设置，默认是水平从左到右；副方向总是和主方向垂直。justify-content用来控制主方向的排列方式，align-items用来控制副方向的对齐方式，gap用来设置间距。记住这个对应关系就不会再遇到“为什么不能居中”的问题了。
常见的容器层组合有：
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
}
子项层用flex简写接管伸缩逻辑：flex: 1 1 200px 表示“初始为200px，有空就分，不够就缩”；固定区域写flex: 0 0 240px；图标头像写flex: none；内容区写flex: 1吃掉剩余空间。
一些常见的实战形态：
-
垂直水平居中：display:flex + justify-content:center + align-items:center
-
顶部和底部吸附布局：容器min-height为100vh，flex-direction为column，中间部分flex为1
-
响应式卡片流：使用flex-wrap属性使子元素自动换行，不需要额外的媒体查询
-
卡片中的按钮下沉：使用flex-direction:column和margin-top:auto
-
导航左右分开：justify-content:space-between或者某个子元素margin-left:auto
在移动的时候顺便把float、clear、clearfix这些伪元素以及用margin来代替的间距也给删除掉。Flex布局会自动忽略掉子元素中的float属性，留下它们只会造成混淆。
容易踩的坑：子项默认 min-width:auto，文本过长会撑破容器，截断需补 min-width:0；默认 align-items:stretch 会让图片被拉变形，改 center 或给图片 align-self:flex-start；order 只改视觉顺序，不改变 DOM 与无障碍读取顺序，别拿来做语义重排。
一维排列使用Flexbox，二维网格采用Grid布局方式，二者之间不存在相互排斥的关系，在组件级别和页面级别上各有侧重：Flex负责导航栏、工具栏以及卡片内的布局；而Grid则承担起了整个框架以及多行多列仪表盘的构建工作。
总结：
Flexbox 的价值不仅仅在于减少了浮动 hack 的使用量，更重要的是它改变了我们的布局思维方式——由原来的“一个个元素去凑位置”变成了现在的“设定好容器的规则，使子项自动适应”。掌握了主轴、交叉轴、justify、align 和 flex 伸缩这三个基本要素之后，大部分常见的界面都不再需要用到浮动或者 JavaScript 来计算了。
