# Flex常用布局
**Repository Path**: chendaiming/flex_layout
## Basic Information
- **Project Name**: Flex常用布局
- **Description**: flex常用布局，小程序布局
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 5
- **Forks**: 1
- **Created**: 2018-04-24
- **Last Updated**: 2024-01-10
## Categories & Tags
**Categories**: Uncategorized
**Tags**: CSS, HTML
## README
# Flex常用布局
#### 项目介绍
flex常用布局，导入css后直接使用，
小程序使用，将 **px** 全部改成 **rpx**
#### 使用说明
#### 1. 以行布局
```
.rflex
```
使用方法：
```
1
2
3
```
结果：
#### 2. 以列布局
```
.cflex
```
使用方法：
```
1
2
3
```
结果：
#### 3. 行布局自动换行
```
.rflex_wrap
```
使用方法：
```
1
2
3
4
5
6
```
结果：
#### 4. 布局参数
```
.flex_1 ~ .flex_9
```
使用方法：
```
1
2
3
1
2
3
```
结果：
#### 5. 内容 X 轴布局（左右布局）
```
使用rflex:
.flex_x_center 左右居中
.flex_x_start 靠左显示
.flex_x_end 靠右显示
```
```
使用cflex:
.flex_x_center 上下居中
.flex_x_start 靠上显示
.flex_x_end 靠下显示
```
使用方法：
```
1
2
3
1
2
3
```
结果：
#### 6. 内容 Y 轴布局 （上下布局）
```
使用rflex:
.flex_y_center 上下居中
.flex_y_start 靠上显示
.flex_y_end 靠下显示
```
```
使用cflex:
.flex_y_center 左右居中
.flex_y_start 靠左显示
.flex_y_end 靠右显示
```
使用方法：
```
1
2
3
1
2
3
```
结果：
#### 7. 内容 X + Y 轴居中
.flex_center
使用方法：
```
1
2
3
1
2
3
```
结果：
#### 8. 单个内容布局 （同上）
.flex_one_center
.flex_one_start
.flex_one_end
使用方法：
```
1
2
3
1
2
3
```
结果：
#### 9. 多行内容布局 （配合 rflex_wrap 使用 ，没有添加 cflex_wrap, 不常用，也可直接配合 flex_x_xxx 和 flex_y_xxx 使用）
.flex_wrap_center 内容居中
.flex_wrap_start 靠左
.flex_wrap_end 靠右
.flex_wrap_space_a 项目之间的间隔都相等
.flex_wrap_space_b 两端对齐，项目之间的间隔都相等
使用方法：
```
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
1
2
3
4
5
6
```
结果：
#### 10. 项目之间的间隔都相等
.flex_space_a
#### 11. 两端对齐，项目之间的间隔都相等
.flex_space_b
### 最后
内容也可以使用flex布局
```
1
2
3
4
5
6
7
8
9
```
### 导航
[https://gitee.com/chendaiming/flex_layout](https://gitee.com/chendaiming/flex_layout)