Flex 弹性布局入门笔记

2026-06-07 · 阅读 4 分钟

以前想让几个元素水平排列、垂直居中，要用 float 加各种偏移，特别费劲。学了 flex 以后，这些需求基本一两行就搞定。

基本用法

在父元素上写 display: flex，它的直接子元素就会排成一行：

.container {
  display: flex;
  justify-content: center; /* 主轴（水平）居中 */
  align-items: center;     /* 交叉轴（垂直）居中 */
  gap: 10px;               /* 子元素之间的间距 */
}

记住两个方向：主轴（默认水平）用 justify-content 管，交叉轴（默认垂直）用 align-items 管。常用的值有 flex-start、center、space-between、space-around。

让某个元素占满剩余空间

.sidebar { width: 200px; }
.main {
  flex: 1; /* 占掉剩下的所有宽度 */
}

flex: 1 的意思是"剩下的空间分我一份"，配合固定宽度的侧边栏做两栏布局非常好用。

换行

flex 默认不换行，子元素太多会被压扁。加 flex-wrap: wrap 就会在放不下时换到下一行。

我踩过的坑

给子元素写 margin: auto 在 flex 容器里有个妙用：它会把剩余空间全吃掉，可以让某个元素被"推"到另一头。另外要注意 gap 是加在子元素之间的，最边上不会有，所以不用再写负 margin 那种奇怪的东西了。

小结

flex 是我现在用得最多的布局工具，猜数字小练习的数字键盘就是 flex 的亲戚 grid 排的，页面居中也是 flex 一行搞定。