CSS3 Flexbox 布局完全指南：从入门到实战

小飞兽 HTML/CSS 191 次阅读 2026-06-09

Introduction

CSS3 Flexbox（Flexible Box Layout Module）是 CSS3 引入的第五种布局方案，专门用于解决传统 float 和 position 难以优雅实现的一维布局问题——无论是水平居中、等高列、等宽卡片还是响应式导航栏，Flexbox 都能用几行代码优雅完成。本文涵盖 Flexbox 的全部核心概念、容器属性、项目属性及 10+ 实战场景。

基础概念：弹性容器与弹性项目

/* 1. 创建弹性容器 */
.container {
    display: flex;        /* 块级弹性容器 */
    /* display: inline-flex;  行内级弹性容器 */
}
/* 2. 常用容器属性 */
.container {
    flex-direction: row | row-reverse | column | column-reverse;
    flex-wrap: nowrap | wrap | wrap-reverse;
    justify-content: flex-start | flex-end | center | space-between | space-around;
    align-items: stretch | flex-start | flex-end | center | baseline;
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
    gap: 20px;            /* 项目间距 */
}

实战：经典居中布局

/* 水平垂直同时居中 */
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
/* 响应式导航栏 */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
}
.nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}
/* Sticky Footer（页面内容不满时让 footer 贴底） */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-content { flex: 1; }

弹性项目属性

.item {
    flex-grow: 1;    /* 放大比例，0=不放大，默认0 */
    flex-shrink: 0;  /* 缩小比例，0=不缩小，默认1 */
    flex-basis: auto;/* 初始主尺寸 */
    
    /* 常用简写 */
    flex: 1;         /* flex: 1 1 0%   平均分配 */
    flex: 0 0 200px; /* 不伸缩，固定200px */
    flex: auto;      /* flex: 1 1 auto 先放大后缩小 */
    
    align-self: center; /* 覆盖容器 align-items */
    margin-left: auto;  /* 利用 auto margin 实现特殊对齐 */
}

运行效果

在浏览器中打开上述代码：导航栏.logo 在左、链接在右，自动响应间距；div.parent 中的子元素水平和垂直同时居中；Sticky Footer 布局中，当内容很少时 footer 自动贴底，内容超过一屏时 footer 随页面自然滚动。

常见问题

flex-direction 默认是 row：主轴为水平方向（从左到右），交叉轴为垂直方向（从上到下）。改为 column 后主轴变为垂直方向。

flex-grow vs flex-shrink：grow 控制空间多余时怎么分，shrink 控制空间不足时怎么缩。设为 0 表示保持固定尺寸不参与弹性调整。
justify-content vs align-items：前者沿主轴（main axis）对齐，后者沿交叉轴（cross axis）对齐。direction 改变时两者的作用方向也会反转。

gap 在低版本 Safari 有兼容问题：iOS Safari 14 以下需加 -webkit- 前缀。