屏幕尺寸: < 576px
屏幕尺寸: 576px - 768px
屏幕尺寸: 768px - 992px
屏幕尺寸: 992px - 1200px
屏幕尺寸: > 1200px

## 基本用法

### 使用{d-flex}定义弹性盒子

弹性项目1
弹性项目2
弹性项目3
<div class="d-flex bg-secondary text-white">
<div class="p-3 bg-info">弹性项目1</div>
<div class="p-3 bg-warning">弹性项目2</div>
<div class="p-3 bg-primary">弹性项目3</div>
</div>

### 使用{d-inline-flex}定义内联弹性盒子

弹性项目1
弹性项目2
弹性项目3
内联元素，只占据内容所需空间
<div class="d-inline-flex bg-success text-white p-2">
<div class="p-3 bg-info">弹性项目1</div>
<div class="p-3 bg-warning">弹性项目2</div>
<div class="p-3 bg-primary">弹性项目3</div>
</div>

## 方向控制

### 使用{flex-row}从左侧开始

弹性项目1
弹性项目2
弹性项目3
<div class="d-flex flex-row bg-secondary">...</div>

### 使用{flex-row-reverse}从右侧开始

弹性项目1
弹性项目2
弹性项目3
<div class="d-flex flex-row-reverse bg-secondary">...</div>

### 使用{flex-column}从上往下

弹性项目1
弹性项目2
弹性项目3
<div class="d-flex flex-column bg-secondary">...</div>

### 使用{flex-column-reverse}从下往上

弹性项目1
弹性项目2
弹性项目3
<div class="d-flex flex-column-reverse bg-secondary">...</div>

## 换行控制

### 使用{flex-wrap}自动换行

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
<div class="d-flex bg-secondary flex-wrap">...</div>

### 使用{flex-nowrap}不换行（默认）

固定宽度项目1
固定宽度项目2
固定宽度项目3
固定宽度项目4
固定宽度项目5
<div class="d-flex bg-secondary flex-nowrap">...</div>

## 对齐方式

### 水平对齐：justify-content-*

##### justify-content-start（默认）

项目1
项目2
项目3

##### justify-content-end

项目1
项目2
项目3

##### justify-content-center

项目1
项目2
项目3

##### justify-content-between

项目1
项目2
项目3

##### justify-content-around

项目1
项目2
项目3

##### justify-content-evenly

项目1
项目2
项目3

### 垂直对齐：align-items-* 和 align-self-*

#### 容器级对齐：align-items-*

项目1
项目2
项目3
<div class="d-flex bg-secondary align-items-center" style="height: 150px;">...</div>

#### 项目级对齐：align-self-*

顶部对齐
居中对齐
底部对齐
<div class="d-flex bg-success" style="height: 150px;">
<div class="p-3 bg-info align-self-start">顶部对齐</div>
<div class="p-3 bg-warning align-self-center">居中对齐</div>
<div class="p-3 bg-primary align-self-end">底部对齐</div>
</div>

## 伸缩控制

### 1. 使用flex-grow控制扩展比例

flex-grow-1
flex-grow-2
flex-grow-1

总比例为4，项目1占1/4，项目2占2/4，项目3占1/4

<div class="d-flex bg-secondary">
<div class="p-3 bg-info flex-grow-1">flex-grow-1</div>
<div class="p-3 bg-warning flex-grow-2">flex-grow-2</div>
<div class="p-3 bg-primary flex-grow-1">flex-grow-1</div>
</div>

### 2. 使用flex-shrink控制收缩比例

flex-shrink-0
flex-shrink-1
flex-shrink-2

窗口变小时，flex-shrink值越大的项目收缩越明显

<div class="d-flex bg-secondary">
<div class="p-3 bg-info flex-shrink-0" style="width: 300px;">不收缩</div>
<div class="p-3 bg-warning flex-shrink-1" style="width: 300px;">轻微收缩</div>
<div class="p-3 bg-primary flex-shrink-2" style="width: 300px;">明显收缩</div>
</div>

### 3. 自动相等：flex-fill

伸缩项目1-￥￥￥￥￥￥￥￥￥
伸缩项目2
伸缩项目3
<div class="d-flex bg-secondary">
<div class="p-3 bg-info flex-fill">伸缩项目1-￥￥￥￥￥￥￥￥￥</div>
<div class="p-3 bg-primary flex-fill">伸缩项目2</div>
<div class="p-3 bg-danger flex-fill">伸缩项目3</div>
</div>

使用flex-fill类可以让弹性项目自动填充剩余空间，实现宽度相等的布局效果

## 响应式弹性盒

### 响应式方向控制

在小屏幕上垂直排列，中等屏幕以上水平排列

项目1
项目2
项目3
<div class="d-flex flex-column md:flex-row bg-secondary">...</div>

### 响应式导航栏示例

在小屏幕上堆叠，大屏幕上水平排列

<div class="d-flex flex-wrap justify-content-between align-items-center">
<!-- Logo -->
<div class="block md:hidden">移动端菜单按钮</div>
<div class="hidden md:flex">桌面端菜单</div>
</div>