CSS - Flex 弹性盒布局

什么是 Flex 布局？

Flex（Flexible Box）是一种一维布局模型，专门用于处理页面中的水平或垂直方向的布局问题。它比传统布局更灵活、更简洁。

传统布局 vs Flex 布局

传统布局（普通盒子）

┌─────────────────┐
│  物品1           │  ← 位置固定，不好调整
│  物品2           │
│  物品3           │
└─────────────────┘

Flex 布局（弹性盒子）

┌─────────────────┐
│ 物品1 │ 物品2 │ 物品3 │  ← 可以横向排列
└─────────────────┘

┌─────────────────┐
│      物品1       │  ← 可以轻松居中
│      物品2       │
│      物品3       │
└─────────────────┘

核心概念

┌─────────────────────────────────────┐
│           flex container            │
│  ┌───────┬───────┬───────┐         │
│  │ item1 │ item2 │ item3 │         │
│  └───────┴───────┴───────┘         │
│                                     │
│  主轴 (main axis) ──────────────────►│
│  交叉轴 (cross axis)                │
│              ▲                      │
│              │                      │
└─────────────────────────────────────┘

• 容器（container）：开启 flex 的父元素
• 项目（item）：容器内的直接子元素
• 主轴（main axis）：项目排列的方向（默认水平）
• 交叉轴（cross axis）：垂直于主轴的方向

容器的属性

1. display: flex

开启 flex 布局

.container {
    display: flex;
}

2. flex-direction（主轴方向）

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

3. justify-content（主轴对齐）

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

4. align-items（交叉轴对齐）

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

5. flex-wrap（换行）

.container {
    flex-wrap: nowrap;     /* 默认：不换行 */
    flex-wrap: wrap;       /* 换行 */
    flex-wrap: wrap-reverse; /* 反向换行 */
}

6. gap（间距）

.container {
    gap: 10px;           /* 行和列间距 */
    row-gap: 10px;       /* 行间距 */
    column-gap: 20px;    /* 列间距 */
}

项目的属性

1. flex-grow（放大比例）

.item {
    flex-grow: 1;  /* 如果有剩余空间，按比例分配 */
}

2. flex-shrink（缩小比例）

.item {
    flex-shrink: 0;  /* 不允许缩小 */
}

3. flex-basis（项目长度）

.item {
    flex-basis: 200px;  /* 初始大小 */
}

4. flex（缩写）

.item {
    flex: 1;  /* 相当于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
}

5. align-self（单独对齐）

.item {
    align-self: center;  /* 覆盖容器的 align-items */
}

常用布局示例

垂直水平居中

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

头部导航栏

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

卡片列表（自动换行）

.card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.card {
    width: 300px;
}

圣杯布局

.container {
    display: flex;
}
.sidebar {
    width: 200px;
}
.main {
    flex: 1;  /* 占据剩余空间 */
}