CSS Flexbox布局

用外卖列表来理解

打开美团外卖，菜品列表就是一个Flexbox布局：菜品图片在左边，名字和价格在右边，垂直居中对齐。

Flexbox是什么？

一种让元素自动排列和对齐的CSS布局方式。你只需要告诉浏览器：这些东西横着排还是竖着排、怎么对齐、间距多大。

最常用的属性

容器属性

display: flex — 开启弹性布局

flex-direction: row/column — 横排还是竖排

justify-content: center/space-between — 主轴对齐方式

align-items: center — 交叉轴居中

gap: 10px — 元素之间的间距

子元素属性

flex: 1 — 自动填满剩余空间

flex-shrink: 0 — 不允许被压缩

实际例子

导航栏

横向排列Logo和菜单链接，两端对齐：display flex、justify-content space-between。

卡片网格

多个卡片自动换行排列：display flex、flex-wrap wrap、gap 16px。

垂直居中

让内容在页面正中间：display flex、justify-content center、align-items center、height 100vh。

AI时代还需要学吗？

不需要记住所有属性。告诉AI你想要什么布局效果，它会帮你写CSS。但理解Flexbox的概念能帮你更好地跟AI沟通。

总结

Flexbox就是告诉浏览器：这些东西怎么排列怎么对齐。掌握flex、justify-content、align-items这几个属性就够日常使用了。