Flex是现代CSS布局的「瑞士军刀」。电商页面90%的排列问题——导航栏、商品列表、卡片对齐、垂直居中——都能用 Flex 解决。 本讲一次讲透Flex的所有关键属性，写完你再回头看float / inline-block，会觉得是史前技术。 建议先 点赞 + 收藏 + 关注，写布局时随时回查。
一、为什么Flex是「瑞士军刀」
在Flex出现之前（2009年以前），CSS布局只有三种工具：
- display: block（块级元素）—— 一行一个
- display: inline（行内元素）—— 一行多个，但不能设宽高
- display: inline-block —— 行内但能设宽高，但垂直对齐非常难搞
要做一个「水平垂直居中」的盒子，新人要折腾margin: auto + position: absolute + transform: translate(-50%, -50%)三件套。
2009年Flexbox规范草案出来，2012年浏览器支持，一行display: flex; align-items: center; justify-content: center;搞定。
