Flex常用布局，了解一下

最新推荐文章于 2024-05-23 01:28:45 发布

上官龙云飞

最新推荐文章于 2024-05-23 01:28:45 发布

阅读量308

点赞数

分类专栏： flex 文章标签： flex css

本文链接：https://blog.csdn.net/qq80405708/article/details/80058943

版权

flex 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Gitee： https://gitee.com/chendaiming/flex_layout

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. 布局参数

.df_1 ~ .df_9

使用方法：

<div class="rbox">
    <span class="df_1">1</span>
    <span class="df_1">2</span>
    <span class="df_1">3</span>
</div>
<div class="rbox">
    <span class="df_1">1</span>
    <span class="df_2">2</span>
    <span class="df_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_1_center 
.box_1_start
.box_1_end

使用方法：

<div class="rbox">
    <span>1</span>
    <span class="box_1_center">2</span>
    <span>3</span>
</div>
<div class="cbox box_center">
    <span>1</span>
    <span class="box_1_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>