CSS 布局哪有那么玄学？Flexbox 和 Grid 约等于你的衣柜

衣柜乱不乱，布局说了算

有一天我盯着衣柜发呆，突然顿悟了 CSS 布局的终极奥义。你想想，衣柜分两种人：

第一种：叠衣流 —— 衣服叠好，整整齐齐码在格子里。这就是 Flexbox。一个维度（行或列），怎么排列、怎么换行、怎么对齐，全听你的。

第二种：挂衣流 —— 所有衣服挂成一排，找哪件一目了然。这就是 Grid。二维布局，行和列一起安排。

来看代码

/* Flexbox */.wardrobe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}/* Grid */.showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}

什么时候用谁？

记住一个粗暴的原则：一维用 Flexbox，二维用 Grid。Flexbox 是“排排坐”，Grid 是“占座位”。

千万别用 float 布局了，2020 年了哎！