# Flex布局入门：容器与项目的6大属性
## 开篇：为什么选择Flex布局？
在网页布局的进化历程中，Flexbox（弹性盒子布局）的出现解决了许多传统布局难以处理的问题。作为一种现代的CSS布局模式，Flex布局提供了一种更加高效的方式来分配容器内项目的空间和对齐方式，特别适合构建一维布局（行或列）。
传统布局方式如浮动(float)、表格(table)和定位(position)在处理复杂布局时往往需要大量代码和技巧，而Flex布局则通过简单的属性设置就能实现复杂的布局效果。
## 一、Flex容器基础
### 1. 创建Flex容器
要将一个元素设置为Flex容器，只需设置其display属性为flex或inline-flex：
```css
.container {
display: flex; /* 块级Flex容器 */
/* 或者 */
display: inline-flex; /* 行内Flex容器 */
}
```
一旦元素成为Flex容器，它的直接子元素就自动成为Flex项目(Flex Items)。
### 2. 主轴与交叉轴概念
理解Flex布局的关键是掌握**主轴(Main Axis)**和**交叉轴(Cross Axis)**的概念：
- **主轴**：Flex项目的主要排列方向，由flex-direction属性决定
- **交叉轴**：与主轴垂直的方向
这两个轴决定了Flex布局中所有属性的方向性。
## 二、Flex容器的3大核心属性
### 1. flex-direction：控制主轴方向
该属性决定Flex项目的排列方向：
```css
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
```
- `row`（默认值）：从左到右水平排列
- `row-reverse`：从右到左水平排列
- `column`：从上到下垂直排列
- `column-reverse`：从下到上垂直排列
### 2. justify-content：主轴对齐方式
控制Flex项目在主轴上的对齐方式：
```css
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
```
- `flex-start`（默认值）：向主轴起点对齐
- `flex-end`：向主轴终点对齐
- `center`：居中对齐
- `space-between`：两端对齐，项目间间隔相等
- `space-around`：每个项目两侧间隔相等
- `space-evenly`：项目与项目、项目与容器间距完全相等
### 3. align-items：交叉轴对齐方式
控制Flex项目在交叉轴上的对齐方式：
```css
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
```
- `stretch`（默认值）：拉伸以填满容器高度/宽度
- `flex-start`：向交叉轴起点对齐
- `flex-end`：向交叉轴终点对齐
- `center`：居中对齐
- `baseline`：按项目第一行文字的基线对齐
## 三、Flex项目的3大核心属性
### 1. flex-grow：扩展比例
定义项目的放大比例，默认为0（即如果存在剩余空间，也不放大）：
```css
.item {
flex-grow: <number>; /* 默认0 */
}
```
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目为2，其他为1，则前者占据的剩余空间是其他项目的两倍。
### 2. flex-shrink：收缩比例
定义项目的缩小比例，默认为1（即如果空间不足，该项目将缩小）：
```css
.item {
flex-shrink: <number>; /* 默认1 */
}
```
负值无效。如果所有项目flex-shrink都为1，空间不足时等比例缩小。如果一个项目为0，其他为1，则空间不足时前者不缩小。
### 3. flex-basis：初始大小
定义在分配多余空间之前，项目占据的主轴空间：
```css
.item {
flex-basis: <length> | auto; /* 默认auto */
}
```
可以设为像width/heigth一样的值（如350px），则表示项目将占据固定空间。
## 四、flex简写属性
flex是flex-grow、flex-shrink和flex-basis的简写：
```css
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
```
常用简写值：
- `flex: 0 1 auto`（默认值）
- `flex: 1`（即flex: 1 1 0%）
- `flex: auto`（即flex: 1 1 auto）
- `flex: none`（即flex: 0 0 auto）
## 五、其他实用属性
### 1. flex-wrap：换行控制
```css
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
```
- `nowrap`（默认）：不换行
- `wrap`：换行，第一行在上方
- `wrap-reverse`：换行，第一行在下方
### 2. align-content：多行对齐
当Flex项目有多行时，控制行在交叉轴上的对齐方式：
```css
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
```
### 3. align-self：单个项目对齐
允许单个项目有与其他项目不一样的对齐方式：
```css
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
```
## 六、实战案例
### 案例1：完美居中
```css
.container {
display: flex;
justify-content: center;
align-items: center;
}
```
仅需三行代码即可实现水平和垂直居中，这在传统布局中需要复杂技巧。
### 案例2：圣杯布局
```html
<div class="container">
<header>Header</header>
<div class="main">
<nav>Nav</nav>
<article>Article</article>
<aside>Aside</aside>
</div>
<footer>Footer</footer>
</div>
```
```css
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main {
display: flex;
flex: 1;
}
article {
flex: 1;
}
nav, aside {
flex: 0 0 200px;
}
```
### 案例3：响应式导航栏
```css
.nav {
display: flex;
flex-wrap: wrap;
}
.nav-item {
flex: 1 1 150px; /* 最小宽度150px，自动换行 */
}
```
## 结语：Flex布局的适用场景
Flex布局特别适合以下场景：
- 需要内容垂直居中
- 需要等分布局
- 需要动态调整项目大小
- 需要改变项目顺序
- 构建一维线性布局
虽然Flex布局强大，但它主要解决一维布局问题。对于更复杂的二维布局，可以考虑Grid布局。在下一篇文章中，我们将深入探讨CSS Grid布局的使用技巧。
---
**互动环节**：你在哪些项目中使用了Flex布局？遇到了哪些有趣的挑战？欢迎在评论区分享你的经验！
**延伸阅读**：
- 推荐工具：Flexbox Froggy（游戏化学习Flex布局）
- 推荐资源：CSS Tricks的Flexbox完全指南
