Flex常用布局

项目介绍

flex简单布局，导入css后直接使用

使用说明

1. 以行布局

.rbox

使用方法：

1

2

3

结果：

2. 以列布局

.cbox

使用方法：

1

2

3

结果：

3. 行布局自动换行

.rbox_wrap

使用方法：

1

2

3

4

5

6

结果：

4. 布局参数

.df_1 ~ .df_9

使用方法：

1

2

3

1

2

3

结果：

5. 内容 X 轴布局(左右布局)

使用rbox:

.box_x_center 左右居中

.box_x_start 靠左显示

.box_x_end 靠右显示

使用cbox:

.box_x_center 上下居中

.box_x_start 靠上显示

.box_x_end 靠下显示

使用方法：

1

2

3

1

2

3

结果：

6. 内容 Y 轴布局 (上下布局)

使用rbox:

.box_y_center 上下居中

.box_y_start 靠上显示

.box_y_end 靠下显示

使用cbox:

.box_y_center 左右居中

.box_y_start 靠左显示

.box_y_end 靠右显示

使用方法：

1

2

3

1

2

3

结果：

7. 内容 X + Y 轴居中

.box_center

使用方法：

1

2

3

1

2

3

结果：

8. 单个内容布局 (同上)

.box_1_center

.box_1_start

.box_1_end

使用方法：

1

2

3

1

2

3

结果：

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 两端对齐，项目之间的间隔都相等

使用方法：

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. 项目之间的间隔都相等

.box_space_a

11. 两端对齐，项目之间的间隔都相等

.box_space_b

最后

内容也可以使用flex布局

1

2

3

4

5

6

7

8

9

flex 引入css,Flex常用布局相关推荐

  1. html flex自动换行,css flex布局超长自动换行的示例代码

    要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...

  2. 使用 flex 实现 5 种常用布局

    原文链接 Sticky Footer 经典的上-中-下布局. 当页面内容高度小于可视区域高度时,footer 吸附在底部:当页面内容高度大于可视区域高度时,footer 被撑开排在 content 下 ...

  3. css中flex=1,css flex 1 省略号

    css flex 1 省略号 css block布局省略号通常需要满足固定高和固定宽才能实现省略号,本章节将演示如何实现css flex 1 省略号. 单行文本省略号 body { padding: ...

  4. html div flex,利用css flex实现垂直居中

    应用flex实现垂直居中 行使css flex完成垂直居中.flex笼统不是实现垂直居中最好的决定,由于IE8,9其实不支持它. 那会,为了用flex实现垂直居中,咱们首先要确立一个包裹着图片的div ...

  5. css 一些 常用布局

    div骨架 Code     <div id="header">ss</div>     <div id="container"& ...

  6. CSS常用布局二（flex布局）

    flex布局 前言:flex是flexible box的缩写,译为"弹性布局",用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局,只需要设置"displ ...

  7. flex 单独一行_Flex网页布局一CSS弹性伸缩盒子语法教程

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  8. css布局方式_手把手教你CSS Flex布局「真香」

    作者:EcbJS 转发链接:https://blog.csdn.net/EcbJS/article/details/106466757 前言   之前做项目,关于布局方面没怎么深入研究过,好多页面都是 ...

  9. CSS flex布局

    1. 介绍 1.1 说明 flex布局,也称为flex弹性布局:主要目的是使item的宽度.高度按一定顺序填充父容器的可用空间. 示例 注意:在下文中,将以parent指代父容器,item指代容器内的 ...

最新文章

  1. Python可视化——3D绘图解决方案pyecharts、matplotlib、openpyxl
  2. pychrom 中文版
  3. php语法大全下载,PHP下载文件
  4. nodejs安装及环境配置_nodeJS安装和环境变量的配置
  5. 定时器和promise_分析 Promise 内部实现
  6. 仓储模式到底是不是反模式？
  7. 用python绘制好看的图形_怎么用Python画出好看的词云图？
  8. SQLAlchemy文档翻译
  9. Java从零开始学三(public class和class)
  10. NYOJ324 - 猴子吃桃问题
  11. git配置ssh秘钥（公钥以及私钥）windows
  12. SQLsever --数据库置疑
  13. c语言数组文曲星猜数游戏编程,第7章 数组-8数组的其他应用——文曲星猜数游戏...
  14. nyoj-1016-德莱联盟（向量叉乘判断线段相交）
  15. 如何截取电影画面转换成gif动图做微信表情包
  16. 又一AI大牛重返学界！ 原京东高级副总裁周伯文受聘为清华电子工程系长聘教授...
  17. Linux中的高级网络控制
  18. [20190531]ORA-600 kokasgi1故障模拟与恢复(后续).txt
  19. 2021云南省高考省统测成绩查询,2021年云南省第一次省统测成绩对比2020年高考录取分析...
  20. 李子的猜数游戏！！！！！epsilon1.0！

热门文章

  1. 程序员的职业病(职业素养)之一：动手写业务代码之前先考虑异常处理
  2. 一个filter引起的404错误
  3. 推荐一个提供全球新冠肺炎确诊，死亡和治愈人数的网站，提供csv下载
  4. SAP UI5 workthrough 12 sap.m.shell
  5. SM_INTEGRATION_SRV
  6. Fiori navigation list scroll down后自动发OData请求取数据
  7. price change SAT trace
  8. how to find element's document section
  9. F4 value help and HANA native SQL
  10. se16 and include table entries into TR SAT trace - Gross time and Net time