Flex
最后更新于：2022-04-02 03:17:49
[TOC]
## Flex Direction
控制 Flex 子项的方向的功能类
| Class | Properties |
| --- | --- |
| flex-row | flex-direction: row; |
| flex-row-reverse | flex-direction: row-reverse; |
| flex-col | flex-direction: column; |
| flex-col-reverse | flex-direction: column-reverse; |
### 实例
#### 水平放置
```
```
#### 垂直放置
```
```
## Flex Wrap 是否阻止换行
| Class| Properties | 备注|
| --- | --- |---|
| flex-wrap | flex-wrap: wrap; | 换行|
| flex-wrap-reverse | flex-wrap: wrap-reverse; | 翻转换行|
| flex-nowrap | flex-wrap: nowrap; | 不换行|
### 实例
#### 换行
```
```
#### 不换行
```
```
对div会进行压缩
## Flex
用于控制 flex 项目放大和缩小的功能类。
| Class | Properties | 备注|
| --- | --- |---|
| flex-1 | flex: 1 1 0%; | 允许 flex 项目根据需要放大和缩小，忽略其初始尺寸|
| flex-auto | flex: 1 1 auto; |在考虑到其初始大小的情况下放大和缩小|
| flex-initial | flex: 0 1 auto; |考虑到其初始尺寸的情况下缩小但不放大|
| flex-none | flex: none; |一个 flex 项目的放大和缩小|
### 实例
```
```
## flex-grow
控制 flex 项目放大的功能类
| Class | Properties | 备注|
| --- | --- | ---|
| flex-grow-0 | flex-grow: 0; | 阻止一个 flex 项目放大|
| flex-grow | flex-grow: 1; | 一个 flex 项目放大，以填充任何可用空间|
### 实例
```
```
## Flex Shrink
控制 flex 项目缩小的功能类
| Class | Properties | 备注|
| --- | --- |---|
| flex-shrink-0 | flex-shrink: 0; |阻止一个 flex 项目缩小|
| flex-shrink | flex-shrink: 1; |flex 项目在必要的时候缩小|
### 实例
先缩放"flex-grow",当"flex-grow"缩放到 h-16时,再缩放 "flex-shrink"
```
```
## Order
用来控制 flex 项目排列顺序的功能类
| Class | Properties |
| --- | --- |
| order-1 | order: 1; |
| order-2 | order: 2; |
|...|...|
';
1
2
3
1
2
3
1
2
3
4
1
2
3
4
Short
Medium length
Significantly larger amount of content
1
2
3
1
2
3