Flex常用布局
项目介绍
https://gitee.com/chendaiming/flex_layout
flex常用布局,导入css后直接使用,
小程序使用,将 px 全部改成 rpx
使用说明
1. 以行布局
.rbox
使用方法:
<div class="rbox">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
结果:
2. 以列布局
.cbox
使用方法:
<div class="cbox">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
结果:
3. 行布局自动换行
.rbox_wrap
使用方法:
<div class="rbox_wrap">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
结果:
4. 布局参数
.flex_1 ~ .flex_9
使用方法:
<div class="rbox">
<span class="flex_1">1</span>
<span class="flex_1">2</span>
<span class="flex_1">3</span>
</div>
<div class="rbox">
<span class="flex_1">1</span>
<span class="flex_2">2</span>
<span class="flex_3">3</span>
</div>
结果:
5. 内容 X 轴布局(左右布局)
使用rbox:
.box_x_center 左右居中
.box_x_start 靠左显示
.box_x_end 靠右显示
使用cbox:
.box_x_center 上下居中
.box_x_start 靠上显示
.box_x_end 靠下显示
使用方法:
<div class="rbox box_x_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="cbox box_x_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
结果:
6. 内容 Y 轴布局 (上下布局)
使用rbox:
.box_y_center 上下居中
.box_y_start 靠上显示
.box_y_end 靠下显示
使用cbox:
.box_y_center 左右居中
.box_y_start 靠左显示
.box_y_end 靠右显示
使用方法:
<div class="rbox box_y_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="cbox box_y_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
结果:
7. 内容 X + Y 轴居中
.box_center
使用方法:
<div class="rbox box_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div class="cbox box_center">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
结果:
8. 单个内容布局 (同上)
.box_one_center
.box_one_start
.box_one_end
使用方法:
<div class="rbox">
<span>1</span>
<span class="box_one_center">2</span>
<span>3</span>
</div>
<div class="cbox box_center">
<span>1</span>
<span class="box_one_center">2</span>
<span>3</span>
</div>
结果:
9. 多行内容布局 (配合 rbox_wrap 使用 ,没有添加 cbox_wrap, 不常用,也可直接配合 box_x_xxx 和 box_y_xxx 使用)
.box_wrap_center 内容居中
.box_wrap_start 靠左
.box_wrap_end 靠右
.box_wrap_space_a 项目之间的间隔都相等
.box_wrap_space_b 两端对齐,项目之间的间隔都相等
使用方法:
<div class="rbox_wrap box_wrap_center">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<div class="rbox_wrap box_wrap_space_a">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<div class="rbox_wrap box_wrap_space_a box_center">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
<div class="rbox_wrap box_wrap_space_a box_x_end">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
结果:
10. 项目之间的间隔都相等
.box_space_a
11. 两端对齐,项目之间的间隔都相等
.box_space_b
最后
内容也可以使用flex布局
<div class="rbox_wrap">
<span class="rbox box_center">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>