Django + Vue电商项目第008讲：Flex布局｜搞定90%页面排列需求

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;搞定。