Flex常用布局

原创已于 2022-03-11 14:11:17 修改 · 412 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2022-03-11 14:00:03 首次发布

flex 同时被 2 个专栏收录

3 篇文章

订阅专栏

css

1 篇文章

订阅专栏

该博客详细介绍了Flex布局的常见用法，包括行布局、列布局、自动换行、布局参数调整、内容对齐方式以及多行内容布局等，并提供了相应的HTML示例代码，适用于小程序开发中的样式布局。此外，还提到了项目之间的间隔处理和两端对齐的实现方法，帮助开发者更高效地使用Flex布局。

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>

在这里插入图片描述