CSS Flexbox 速查表：每个属性都有示例详解

CSS Flexbox 是现代 Web 开发中使用最广泛的布局系统。它提供了一种强大、高效的方式来对齐、分布和重新排列容器内的元素 — 即使元素大小未知或动态变化。本完整 CSS Flexbox 速查表通过实际代码示例解释每个属性，帮助你掌握弹性布局。

使用我们的 Flexbox 生成器可视化构建弹性布局 →

容器属性

Flexbox 从弹性容器开始。在父元素上设置 display: flex，其直接子元素就成为弹性项目。

display: flex | inline-flex

定义弹性容器。flex 创建块级弹性容器；inline-flex 创建行内级弹性容器。

.flex-container {
  display: flex;        /* block-level flex container */
}

.inline-flex-container {
  display: inline-flex;  /* inline-level flex container */
}

flex-direction

设定主轴方向，决定弹性项目在容器中的排列方式。

.container {
  /* Main axis: left to right (default) */
  flex-direction: row;

  /* Main axis: right to left */
  flex-direction: row-reverse;

  /* Main axis: top to bottom */
  flex-direction: column;

  /* Main axis: bottom to top */
  flex-direction: column-reverse;
}

justify-content

控制项目在主轴上的分布方式（默认为水平方向）。

.container {
  display: flex;

  /* Pack items to the start (default) */
  justify-content: flex-start;
  /* Result: [1][2][3]              */

  /* Center items */
  justify-content: center;
  /* Result:       [1][2][3]        */

  /* Pack items to the end */
  justify-content: flex-end;
  /* Result:              [1][2][3] */

  /* Equal space between items */
  justify-content: space-between;
  /* Result: [1]     [2]     [3]   */

  /* Equal space around items */
  justify-content: space-around;
  /* Result:  [1]   [2]   [3]     */

  /* Equal space between and around items */
  justify-content: space-evenly;
  /* Result:   [1]   [2]   [3]    */
}

align-items

控制项目在交叉轴上的对齐方式（默认为垂直方向）。

.container {
  display: flex;
  height: 200px;

  /* Stretch to fill container (default) */
  align-items: stretch;

  /* Align to the top */
  align-items: flex-start;

  /* Align to the center */
  align-items: center;

  /* Align to the bottom */
  align-items: flex-end;

  /* Align by text baseline */
  align-items: baseline;
}

flex-wrap

控制项目是强制在单行显示还是可以换行到多行。

.container {
  display: flex;

  /* All items on one line (default) — may overflow */
  flex-wrap: nowrap;

  /* Items wrap to next line when needed */
  flex-wrap: wrap;

  /* Items wrap in reverse order */
  flex-wrap: wrap-reverse;
}

/* Shorthand: flex-flow combines direction + wrap */
.container {
  flex-flow: row wrap;         /* same as flex-direction: row + flex-wrap: wrap */
  flex-flow: column nowrap;    /* column direction, no wrapping */
}

align-content

当项目换行到多行时，控制行之间的间距。对单行弹性容器无效。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;

  /* Pack lines to the start */
  align-content: flex-start;

  /* Center lines */
  align-content: center;

  /* Pack lines to the end */
  align-content: flex-end;

  /* Equal space between lines */
  align-content: space-between;

  /* Equal space around lines */
  align-content: space-around;

  /* Lines stretch to fill container (default) */
  align-content: stretch;
}

gap, row-gap, column-gap

控制弹性项目之间的间距。与 margin 不同，gap 仅在项目之间生效，不作用于外边缘。

.container {
  display: flex;
  flex-wrap: wrap;

  /* Equal gap in both directions */
  gap: 16px;

  /* Different row and column gaps */
  gap: 20px 12px;         /* row-gap: 20px, column-gap: 12px */

  /* Individual properties */
  row-gap: 20px;
  column-gap: 12px;
}

/* Example: card grid with gap */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.card-grid > .card {
  flex: 1 1 300px;  /* grow, shrink, min 300px */
}

项目属性

这些属性设置在弹性项目（弹性容器的子元素）上，控制它们的尺寸和定位。

order

控制项目的视觉顺序。值越小越靠前。默认为 0。

.item-a { order: 2; }  /* appears third */
.item-b { order: -1; } /* appears first */
.item-c { order: 0; }  /* appears second (default) */

/* Visual result: [B] [C] [A]
   DOM order:     A    B    C
   Sorted order: -1    0    2  */

flex-grow

定义当有多余空间时，项目相对于兄弟元素的增长比例。默认为 0（不增长）。

/* All items same size — share space equally */
.item { flex-grow: 1; }

/* Item B takes twice the extra space */
.item-a { flex-grow: 1; }
.item-b { flex-grow: 2; }
.item-c { flex-grow: 1; }
/* If 200px extra: A gets 50px, B gets 100px, C gets 50px */

/* Only item B grows to fill remaining space */
.item-a { flex-grow: 0; width: 100px; }
.item-b { flex-grow: 1; }
.item-c { flex-grow: 0; width: 100px; }
/* Result: [100px][    fill    ][100px] */

flex-shrink

定义当空间不足时，项目相对于兄弟元素的收缩比例。默认为 1。

/* Default: all items shrink equally */
.item { flex-shrink: 1; }

/* Prevent an item from shrinking */
.sidebar {
  flex-shrink: 0;
  width: 250px;  /* stays at 250px even when container is small */
}

/* Item A shrinks twice as fast */
.item-a { flex-shrink: 2; width: 300px; }
.item-b { flex-shrink: 1; width: 300px; }
/* If 100px must be removed: A loses ~67px, B loses ~33px */

flex-basis

设置项目在空间分配前的初始主尺寸。可以是长度、百分比或 auto。

.item {
  /* Use item's content size (default) */
  flex-basis: auto;

  /* Fixed starting size */
  flex-basis: 200px;

  /* Percentage of container */
  flex-basis: 25%;

  /* Use content's intrinsic size */
  flex-basis: content;

  /* Zero basis — ignore content size for space distribution */
  flex-basis: 0;
}

/* flex-basis vs width:
   - flex-basis sets the initial size BEFORE grow/shrink
   - width sets a fixed size
   - flex-basis is relative to the main axis
   - If both are set, flex-basis wins */

flex（简写）

flex-grow、flex-shrink 和 flex-basis 的简写形式。推荐使用此方式设置弹性项目尺寸。

/* flex: <grow> <shrink> <basis> */

.item { flex: 0 1 auto; }    /* default: don't grow, can shrink, auto basis */
.item { flex: 1; }           /* same as flex: 1 1 0%  — grow equally */
.item { flex: auto; }        /* same as flex: 1 1 auto — grow based on content */
.item { flex: none; }        /* same as flex: 0 0 auto — fully inflexible */
.item { flex: 2; }           /* same as flex: 2 1 0%  — grows 2x */
.item { flex: 1 0 300px; }   /* grow, don't shrink, start at 300px */

align-self

覆盖容器的 align-items 值，针对特定项目单独设置对齐方式。

.container {
  display: flex;
  align-items: flex-start;  /* all items at top */
  height: 200px;
}

.special-item {
  align-self: center;       /* this item centered vertically */
}

/* Values: auto | flex-start | flex-end | center | baseline | stretch */
.item-a { align-self: flex-start; }  /* top */
.item-b { align-self: center; }      /* middle */
.item-c { align-self: flex-end; }    /* bottom */
.item-d { align-self: stretch; }     /* full height */

常见布局模式

以下是实际项目中最常用的 Flexbox 布局模式。

居中元素

Flexbox 使居中变得简单 — 不再需要 margin hack 或绝对定位。

/* Horizontal centering */
.center-horizontal {
  display: flex;
  justify-content: center;
}

/* Vertical centering */
.center-vertical {
  display: flex;
  align-items: center;
  height: 100vh;
}

/* Perfect centering (both axes) */
.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Alternative: center with margin auto */
.center-auto {
  display: flex;
  height: 100vh;
}
.center-auto > .child {
  margin: auto;  /* centers in both axes */
}

导航栏

经典的响应式导航栏，logo 在左，链接在右。

/* Basic navbar: logo left, links right */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 64px;
}

.navbar .logo {
  flex-shrink: 0;
}

.navbar .nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

/* Navbar with center section */
.navbar-3 {
  display: flex;
  align-items: center;
  padding: 0 24px;
}
.navbar-3 .left   { flex: 1; }
.navbar-3 .center { flex: 0; white-space: nowrap; }
.navbar-3 .right  { flex: 1; display: flex; justify-content: flex-end; }

卡片网格

响应式卡片布局，自动换行并均匀分布。

/* Responsive card grid */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card {
  flex: 1 1 300px;   /* grow, shrink, min 300px */
  max-width: 400px;
}

/* Cards with equal height */
.card-grid-equal {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.card-equal {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.card-equal .card-body {
  flex: 1;           /* body fills remaining height */
}

.card-equal .card-footer {
  margin-top: auto;  /* footer pushed to bottom */
}

粘性页脚

即使内容较少，页脚也始终固定在视口底部。

/* Sticky footer layout */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

header {
  flex-shrink: 0;  /* fixed height header */
}

main {
  flex: 1;         /* takes all remaining space */
}

footer {
  flex-shrink: 0;  /* fixed height footer */
}

/* HTML structure:
   <body>
     <header>...</header>
     <main>...</main>
     <footer>...</footer>
   </body>
*/

圣杯布局

经典的三栏布局，带页头和页脚。

/* Holy grail layout */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page > header,
.page > footer {
  flex-shrink: 0;
}

.page > .content {
  flex: 1;
  display: flex;
}

.page .sidebar-left {
  flex: 0 0 200px;   /* fixed 200px left sidebar */
  order: -1;         /* appears first visually */
}

.page .main {
  flex: 1;           /* main content fills remaining space */
  min-width: 0;      /* prevent overflow */
}

.page .sidebar-right {
  flex: 0 0 200px;   /* fixed 200px right sidebar */
}

/* HTML structure:
   <div class="page">
     <header>Header</header>
     <div class="content">
       <main class="main">Main Content</main>
       <aside class="sidebar-left">Left</aside>
       <aside class="sidebar-right">Right</aside>
     </div>
     <footer>Footer</footer>
   </div>
*/

Flexbox 与 Grid：何时使用

Flexbox 和 CSS Grid 都是强大的布局工具，但它们解决不同的问题。

Flexbox 最适合：

• One-dimensional layouts (a single row or column)
• Content-driven sizing (items determine their own width)
• Dynamic, unknown number of items
• Navigation bars and toolbars
• Centering elements
• Components where items should wrap naturally

CSS Grid 最适合：

• Two-dimensional layouts (rows and columns together)
• Layout-driven sizing (the layout dictates item sizes)
• Complex page layouts with header, sidebar, content, footer
• Overlapping elements in a grid
• When you need precise control over both axes simultaneously
• Dashboard-style layouts with varying card sizes

/* Combining Flexbox and Grid */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Use Flexbox inside grid areas */
.page header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page main {
  grid-area: main;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-content: flex-start;
}

浏览器支持

Flexbox 在所有现代浏览器中都有出色的支持。

Flexbox has over 99% global browser support. The only consideration is the gap property in flex contexts, which requires slightly newer browsers. For older browser support, use margins as a fallback:

/* Fallback for gap */
.container {
  display: flex;
  flex-wrap: wrap;
  margin: -8px;       /* negative margin to offset item margins */
}
.container > .item {
  margin: 8px;        /* acts like gap: 16px */
}

/* Modern approach with @supports */
@supports (gap: 16px) {
  .container {
    gap: 16px;
    margin: 0;
  }
  .container > .item {
    margin: 0;
  }
}

常见问题

justify-content 和 align-items 有什么区别？

justify-content 控制主轴方向的分布（flex-direction: row 时默认为水平方向），align-items 控制交叉轴方向的对齐（默认为垂直方向）。如果将 flex-direction 改为 column，这两个轴会互换。

什么时候应该用 Flexbox 而不是 CSS Grid？

Flexbox 适合一维布局（行或列）、内容驱动的尺寸、动态布局。CSS Grid 适合二维布局（同时控制行和列）、布局驱动的尺寸。两者可以结合使用：Grid 做页面布局，Flexbox 做组件内部布局。

如何让 flex 项目等宽？

给所有项目设置 flex: 1。这是 flex-grow: 1, flex-shrink: 1, flex-basis: 0% 的简写，使所有项目从零基础等比增长。如果仍然不等宽，还需设置 min-width: 0。

为什么我的 flex 项目不会缩小？

flex 项目默认有 min-width: auto，阻止它们缩小到内容最小尺寸以下。解决方法是设置 min-width: 0（列布局则设 min-height: 0）。同时检查 flex-shrink 是否为 0。

可以在 Flexbox 中使用 gap 吗？

可以，gap 属性在所有现代浏览器中均支持 Flexbox（Chrome 84+、Firefox 63+、Safari 14.1+、Edge 84+）。推荐使用 gap 来添加项目间距，因为与 margin 不同，gap 仅在项目之间创建间距。

CSS Flexbox 是现代 Web 布局的必备工具。掌握这些属性和模式，你可以高效构建任何 UI 布局。使用我们的交互工具来加深理解。

试试我们的 Flexbox 生成器，可视化构建布局 →