弹性布局 Flexbox

Flexbox（Flexible Box Layout，弹性盒子布局）是 CSS3 提供的一种现代布局方式，用于更高效地分配容器内的空间，并实现灵活的响应式布局。它特别适合处理一维布局（行或列方向排列的元素）。

一、Flexbox 基本概念

1、Flex 容器（Flex Container）

通过 display: flex 或 display: inline-flex 将一个元素设为 Flex 容器，其子元素自动成为 Flex 项目（Flex Items）。

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

2、Flex 项目（Flex Items）

Flex 容器的直接子元素自动成为 Flex 项目，可以灵活调整大小、顺序和对齐方式。

<div class="container"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div>
</div>

二、Flex 容器属性

1、主轴方向：flex-direction

定义 Flex 项目的排列方向（主轴方向）：

row（默认）：水平排列（左 → 右）row-reverse：水平反向排列（右 → 左）column：垂直排列（上 → 下）column-reverse：垂直反向排列（下 → 上）

.css{flex-direction: row | row-reverse | column | column-reverse;
}

2、换行方式：flex-wrap

控制 Flex 项目是否换行：

nowrap（默认）：不换行（可能溢出）wrap：换行（从上到下）wrap-reverse：反向换行（从下到上）

.container {flex-wrap: nowrap | wrap | wrap-reverse;
}

3、主轴对齐：justify-content

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

flex-start（默认）：左对齐flex-end：右对齐center：居中对齐space-between：两端对齐，项目间隔相等space-around：项目两侧间隔相等space-evenly：所有间隔均等

.container {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

4、交叉轴对齐：align-items

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

stretch（默认）：拉伸填满容器高度flex-start：顶部对齐flex-end：底部对齐center：垂直居中baseline：基线对齐

.container {align-items: stretch | flex-start | flex-end | center | baseline;
}

5、多行对齐：align-content

控制多行 Flex 项目在交叉轴上的对齐方式（仅当 flex-wrap: wrap 时生效）：

stretch（默认）：拉伸填满剩余空间flex-start：顶部对齐flex-end：底部对齐center：垂直居中space-between：两端对齐space-around：均匀分布

.container {align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

三、项目属性

1、项目排序：order

控制 Flex 项目的排列顺序（数值越小越靠前，默认 0）：

.item {order: 0; /* 默认值 */
}

2、项目伸缩比例：flex-grow

定义 Flex 项目的放大比例（默认 0，不放大）：

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

3、项目收缩比例：flex-shrink

定义 Flex 项目的收缩比例（默认 1，空间不足时收缩）：

.item {flex-shrink: 1; /* 默认收缩 */
}

4、项目基准大小：flex-basis

定义 Flex 项目的初始大小（类似 width，但优先级更高）：

.item {flex-basis: 200px | auto; /* 默认 auto */
}

5、简写属性：flex

flex-grow + flex-shrink + flex-basis 的简写：

.item {flex: 1 1 auto; /* 默认值 */
}
/* 常用写法 */
.item {flex: 1; /* 等同于 flex: 1 1 0 */
}

6、单独对齐：align-self

覆盖 align-items，单独设置某个 Flex 项目的对齐方式：

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

四、Flexbox 常见布局示例

1、水平居中

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

2、垂直居中

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

3、圣杯布局（Header + Main + Footer）

<div class="container"><header>Header</header><main>Main Content</main><footer>Footer</footer>
</div>

.container {display: flex;flex-direction: column;min-height: 100vh;
}
main {flex: 1; /* 占据剩余空间 */
}

4、等宽卡片布局

.container {display: flex;flex-wrap: wrap;
}
.item {flex: 1 1 200px; /* 最小宽度 200px，自动换行 */
}

5、Flexbox vs. Grid

特性	Flexbox	Grid
布局维度	一维（行或列）	二维（行 + 列）
适用场景	组件内部布局	整体页面布局
对齐控制	主轴 + 交叉轴	行 + 列 + 区域对齐
是否换行	需要 flex-wrap	天然支持多行/多列

6、浏览器兼容性

Flexbox 已被所有现代浏览器支持（包括 IE11+），但部分旧版本可能需要前缀：

.container {display: -webkit-flex; /* Safari 8-9 */display: flex; /* 标准写法 */
}