30. Flexbox 基础

什么是 Flexbox

Flexbox 是 CSS3 引入的弹性布局模块。它解决了浮动布局的诸多痛点，让横向排列、垂直居中等常见需求变得简单。

/* 开启 Flexbox 只需一行 */
.container {
    display: flex;
}

核心概念

Flexbox 有两个核心角色：

• 容器（flex container）：设了 display: flex 的元素
• 项目（flex item）：容器的直接子元素

<div class="container">       <!-- 容器 -->
    <div class="item">1</div> <!-- 项目 -->
    <div class="item">2</div> <!-- 项目 -->
    <div class="item">3</div> <!-- 项目 -->
</div>

.container {
    display: flex;
}

Flexbox 有两条轴：

• 主轴（main axis）：项目排列的方向，默认水平从左到右
• 交叉轴（cross axis）：垂直于主轴的方向

搞定这两条轴，就搞定了 Flexbox 的大半。

容器属性

flex-direction —— 主轴方向

控制项目排列的方向。

.container {
    display: flex;
    flex-direction: row;            /* 水平从左到右（默认） */
    /* flex-direction: row-reverse;   水平从右到左 */
    /* flex-direction: column;        垂直从上到下 */
    /* flex-direction: column-reverse; 垂直从下到上 */
}

值	效果
row	水平排列，从左到右（默认）
row-reverse	水平排列，从右到左
column	垂直排列，从上到下
column-reverse	垂直排列，从下到上

flex-wrap —— 是否换行

默认情况下，项目会挤在一行。flex-wrap 控制是否允许换行。

.container {
    display: flex;
    flex-wrap: wrap;          /* 允许换行 */
    /* flex-wrap: nowrap;       不换行（默认） */
    /* flex-wrap: wrap-reverse; 反向换行 */
}

值	效果
nowrap	不换行，项目会被压缩（默认）
wrap	超出时换到下一行
wrap-reverse	超出时反向换行

flex-flow —— 简写属性

flex-flow 是 flex-direction 和 flex-wrap 的简写。

.container {
    display: flex;
    flex-flow: row wrap;      /* 方向 + 换行 */
}

justify-content —— 主轴对齐

控制项目在主轴上的对齐方式。

.container {
    display: flex;
    justify-content: flex-start;     /* 靠左对齐（默认） */
    /* justify-content: flex-end;      靠右对齐 */
    /* justify-content: center;        居中对齐 */
    /* justify-content: space-between; 两端对齐，中间等距 */
    /* justify-content: space-around;  每个项目两侧间距相等 */
    /* justify-content: space-evenly;  所有间距完全相等 */
}

值	效果
flex-start	靠主轴起点对齐（默认）
flex-end	靠主轴终点对齐
center	居中对齐
space-between	两端对齐，项目之间等距
space-around	每个项目两侧间距相等
space-evenly	所有间距完全相等

align-items —— 交叉轴对齐

控制项目在交叉轴上的对齐方式。

.container {
    display: flex;
    align-items: stretch;        /* 拉伸填满容器（默认） */
    /* align-items: flex-start;    靠交叉轴起点 */
    /* align-items: flex-end;      靠交叉轴终点 */
    /* align-items: center;        交叉轴居中 */
    /* align-items: baseline;      基线对齐 */
}

值	效果
stretch	拉伸填满容器高度（默认）
flex-start	靠交叉轴起点对齐
flex-end	靠交叉轴终点对齐
center	交叉轴居中对齐
baseline	按文字基线对齐

align-content —— 多行对齐

当有多行时，控制行与行之间的对齐方式。

.container {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;     /* 行靠上 */
    /* align-content: center;        行居中 */
    /* align-content: space-between; 行之间等距 */
}

完美居中

Flexbox 让垂直居中变得极其简单。

.center-box {
    display: flex;
    justify-content: center;    /* 水平居中 */
    align-items: center;        /* 垂直居中 */
    height: 300px;
}

<div class="center-box">
    <p>完美居中</p>
</div>

项目属性

order —— 排序

控制项目的显示顺序，值越小越靠前。默认是 0。

.item1 { order: 2; }
.item2 { order: 0; }
.item3 { order: 1; }

效果：显示顺序为 item2 -> item3 -> item1。

flex-grow —— 放大比例

控制项目如何分配剩余空间。默认是 0（不放大）。

.item {
    flex-grow: 1;     /* 所有项目等分剩余空间 */
}

.item-large {
    flex-grow: 2;     /* 占两份 */
}

flex-shrink —— 收缩比例

控制项目如何收缩。默认是 1（等比收缩）。

.item {
    flex-shrink: 1;       /* 默认，空间不足时等比收缩 */
}

.item-fixed {
    flex-shrink: 0;       /* 不收缩，保持原大小 */
}

flex-basis —— 初始大小

设置项目在分配多余空间前的初始大小。

.item {
    flex-basis: 200px;    /* 初始宽度 200px */
}

flex —— 简写属性

flex 是 flex-grow、flex-shrink、flex-basis 的简写。

.item {
    flex: 1;              /* 等于 flex: 1 1 0% */
    /* flex: 0 0 200px;     不放大不收缩，固定 200px */
    /* flex: 1 0 auto;      可放大不收缩，初始大小由内容决定 */
}

align-self —— 单独对齐

覆盖容器的 align-items，让单个项目有不同的对齐方式。

.item {
    align-self: center;       /* 这个项目居中 */
}

.item-top {
    align-self: flex-start;   /* 这个项目靠上 */
}

常见布局实例

等宽三栏

.container {
    display: flex;
}

.item {
    flex: 1;              /* 三个项目等宽 */
    padding: 20px;
}

左侧固定，右侧自适应

.container {
    display: flex;
}

.sidebar {
    width: 200px;         /* 固定宽度 */
}

.main {
    flex: 1;              /* 占满剩余空间 */
}

导航栏

.nav {
    display: flex;
    justify-content: space-between;   /* 两端对齐 */
    align-items: center;              /* 垂直居中 */
    padding: 0 20px;
    height: 60px;
    background: #333;
}

.nav-links {
    display: flex;
    gap: 20px;            /* 项目之间的间距 */
}

.nav a {
    color: white;
    text-decoration: none;
}

卡片等高

.card-list {
    display: flex;
}

.card {
    flex: 1;
    padding: 20px;
    border: 1px solid #ddd;
}

效果：所有卡片自动等高，无需额外设置。

Flexbox vs 浮动

对比项	浮动	Flexbox
横向排列	需要 float + width	display: flex 即可
垂直居中	困难	justify-content + align-items
等高	需要 hack	自动等高
顺序调整	改 HTML	用 order 属性
换行	需要计算宽度	flex-wrap: wrap

浏览器兼容性

Flexbox 已被所有现代浏览器支持：

• Chrome 29+
• Firefox 28+（Firefox 22-27 仅支持旧版单行语法）
• Safari 10+
• Edge 11+
• IE 11（部分支持，有 bug）

如果需要支持 IE 10，可以加 -ms- 前缀。IE 9 及以下不支持。

小结

• Flexbox 是 CSS3 弹性布局，解决了浮动布局的诸多痛点
• 容器设 display: flex，直接子元素自动成为项目
• flex-direction 控制主轴方向，flex-wrap 控制换行
• justify-content 控制主轴对齐，align-items 控制交叉轴对齐
• flex 简写属性是 grow、shrink、basis 的合并
• order 可以调整项目显示顺序，无需修改 HTML