一文搞懂 CSS Flex 布局

一文搞懂 CSS Flex 布局（无图纯干货）

css 里 flex、grid 各种布局都得会。flex 是最常用也最强大的布局方式之一，这篇不配一张图，用最直白的话把 flex 讲明白。

先搞懂「行模式 / 列模式」

这是后面所有属性的前提：

• 父容器 flex-direction 为 row / row-reverse → 行模式（横着排）
• 为 column / column-reverse → 列模式（竖着排）

记住这个，下面 justify-content 和 align-items 谁管水平、谁管垂直就不会乱。

父容器属性

开启 flex

display: flex;

主轴对齐：justify-content

行模式下控制子元素水平方向对齐：

justify-content: flex-start / center / flex-end / space-between / space-around / space-evenly;

• flex-start => [ a b c ######## ]（左对齐，无留白）
• center => [ #### a b c #### ]（居中）
• flex-end => [ ######## a b c ]（右对齐）
• space-between => [ a ### b ### c ]（两端无留白，中间均分）
• space-evenly => [ ## a ## b ## c ## ]（两端留白 = 子元素间留白）
• space-around => [ # a ### b ### c # ]（两端留白是中间的一半）

列模式下 justify-content 反过来管垂直方向。

交叉轴对齐：align-items

行模式下控制子元素垂直方向对齐：

align-items: flex-start / center / flex-end / stretch / baseline;

• stretch：子元素拉伸铺满父容器高度（默认）
• baseline：按文字基线对齐
• 其余和水平方向同理，只是换成垂直。

列模式下 align-items 反过来管水平方向。

排列方向：flex-direction

flex-direction: row / column / row-reverse / column-reverse;

折行：flex-wrap + align-content

flex-wrap: wrap / nowrap;
align-content: flex-start / flex-end / center / space-between / space-evenly / space-around;

flex-wrap: wrap 允许折行时，多出来的行由 align-content 控制（作用和 justify-content 类似，但管的是「行与行之间」）。前提：子元素宽度固定且不收缩，并且超出父容器宽度。

子元素属性

覆盖对齐：align-self / margin

align-self: flex-start / center / flex-end / stretch / baseline; /* 覆盖父容器的 align-items */
margin: auto; /* 覆盖父容器的 justify-content，把自身推到一侧 */

占比 / 增长 / 收缩

flex: 1;          /* 占父容器剩余空间的比例 */
flex-grow: 1;     /* 有空余时主动撑满，默认 0 */
flex-shrink: 1;   /* 空间不足时收缩，默认 1，值越大缩越多 */
flex-basis: 200px;/* 行模式管宽度，列模式管高度；设了它 width/height 就不生效 */

• flex-grow：所有子元素都设相等 → 平分剩余空间；某个设成两倍 → 它占两份。
• flex-shrink：值越大的子元素在收缩时缩得越多。

flex 缩写

flex: 0 1 auto; /* = flex-grow:0; flex-shrink:1; flex-basis:auto */

默认值就是不增长、收缩比例 1、尺寸由内容决定。日常想让某个子元素吃满剩余空间，直接 flex: 1 就够了。

---

原文链接：https://blog.fateguy.com/posts/css-flex