Vusui-css 样式库

Flex 网格系统

网格系统需要使用 vus-box 类，作为父级容器的样式。

对应文件

@vusui/css/lib/flex.cssopen in new window

COL 布局

使用 vus-col-(1~24) 类，作为 col 布局样式。也可用使用 vus-col 或者 vus-col-auto 来自动排列。

在 vus-col-(1~24) 类添加 vus-flex-shrink 可以禁止 vus-col-* 被挤压、缩小。

vus-col-(1~24)


1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
2
2
2
2
3
3
3
3
3
3
3
3
......
23
24
<div class="vus-box">
  <div class="vus-col-1"></div>
  <div class="vus-col-2"></div>
  <div class="vus-col-3"></div>
  <div class="vus-col-23"></div>
  <div class="vus-col-24"></div>
</div>

vus-col


vus-col
vus-col
vus-col
<div class="vus-box">
  <div class="vus-col"></div>
  <div class="vus-col"></div>
  <div class="vus-col"></div>
</div>

vus-col-auto


vus-col-auto
vus-col-auto
vus-col-auto
<div class="vus-box">
  <div class="vus-col-auto"></div>
  <div class="vus-col-auto"></div>
  <div class="vus-col-auto"></div>
</div>

FLEX 布局

使用 vus-flex-(1~24) 类，作为 flex 布局样式。也可用使用 vus-flex 或者 vus-flex-auto 来自动排列。

在 vus-flex-(1~24) 类添加 vus-flex-shrink 可以禁止 vus-flex-* 被挤压、缩小。

vus-flex-(1~24)


1
2
2
3
3
3
......
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
24
<div class="vus-box">
  <div class="vus-flex-1"></div>
  <div class="vus-flex-2"></div>
  <div class="vus-flex-3"></div>
  <div class="vus-flex-23"></div>
  <div class="vus-flex-24"></div>
</div>

vus-flex


vus-flex
vus-flex
vus-flex
<div class="vus-box">
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
</div>

vus-flex-auto


vus-flex-auto
vus-flex-auto
vus-flex-auto
<div class="vus-box">
  <div class="vus-flex-auto"></div>
  <div class="vus-flex-auto"></div>
  <div class="vus-flex-auto"></div>
</div>

分栏间隔

在 vus-box 类中添加 lr-(0~20) 或者 tb-(0~20) 类，可设置分栏之间的 左右 和 上下 间隔。

lr-(0~20)


lr-1
lr-1
lr-1
lr-10
lr-10
lr-10
lr-20
lr-20
lr-20
<div class="vus-box lr-1">
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
</div>

<div class="vus-box lr-10">
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
</div>

<div class="vus-box lr-20">
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
</div>

tb-(0~20)


tb-1
tb-1
tb-1
tb-10
tb-10
tb-10
tb-20
tb-20
tb-20
<div class="vus-box tb-1">
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
</div>

<div class="vus-box tb-10">
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
</div>

<div class="vus-box tb-20">
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
</div>

lr 与 tb 混合

<div class="vus-box lr-8 tb-5">
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
  <div class="vus-flex"></div>
</div>

分栏偏移

在 vus-col-(1~24) 或者 vus-flex-(1~24) 类中添加 vus-offset-(1~23) 类，可设置分栏偏移指定的栏数。

vus-offset-4
vus-offset-4
vus-offset-8
<div class="vus-box">
  <div class="vus-flex-3 vus-offset-4"></div>
  <div class="vus-flex-3 vus-offset-4"></div>
  <div class="vus-flex-3 vus-offset-8"></div>
</div>

排列方式

在 vus-box 类中添加下方表格指定样式，对分栏进行灵活的排列。

样式名称描述
inline将对象作为内联弹性伸缩盒显示
nowrap子元素强制一行显示
wrap-reverse换行，第一行在下方。
row-reverse水平方向排列 ，起点在右端
column垂直方向排列
column-reverse垂直方向排列，起点在下沿
justify-start左对齐
justify-center水平居中
justify-end右对齐
justify-between两端对齐，元素之间的间隔都相等
justify-around每个元素两侧的间隔相等
items-start垂直方向起点对齐
items-center垂直方向居中对齐
items-end垂直方向终点对齐

inline


1
2
3
<div class="vus-box inline">
  <div class="vus-flex"></div>
</div>

nowrap


1
2
nowrap
<div class="vus-box nowrap">
  <div class="vus-flex"></div>
</div>

wrap-reverse


1
2
3
<div class="vus-box wrap-reverse">
  <div class="vus-flex"></div>
</div>

row-reverse


1
2
3
<div class="vus-box row-reverse">
  <div class="vus-flex"></div>
</div>

column


1
2
3
<div class="vus-box column">
  <div class="vus-flex"></div>
</div>

column-reverse


1
2
3
<div class="vus-box column-reverse">
  <div class="vus-flex"></div>
</div>

justify-start


1
2
3
<div class="vus-box justify-start">
  <div class="vus-flex"></div>
</div>

justify-center


1
2
3
<div class="vus-box justify-center">
  <div class="vus-flex"></div>
</div>

justify-end


1
2
3
<div class="vus-box justify-end">
  <div class="vus-flex"></div>
</div>

justify-between


1
2
3
<div class="vus-box justify-between">
  <div class="vus-flex"></div>
</div>

justify-around


1
2
3
<div class="vus-box justify-around">
  <div class="vus-flex"></div>
</div>

items-start


1
2
3
<div class="vus-box items-start">
  <div class="vus-flex"></div>
</div>

items-center


1
2
3
<div class="vus-box items-center">
  <div class="vus-flex"></div>
</div>

items-end


1
2
3
<div class="vus-box items-end">
  <div class="vus-flex"></div>
</div>

响应式布局

响应式预设了四个响应尺寸：

分辨率≥567px≥768px≥1024px≥1280px
Col 布局vus-col-xs-*vus-col-sm-*vus-col-md-*vus-col-lg-*
Flex 布局vus-flex-xs-*vus-flex-sm-*vus-flex-md-*vus-flex-lg-*
分栏偏移vus-offset-xs-*vus-offset-sm-*vus-offset-md-*vus-offset-lg-*
左右间隔lr-xs-*lr-sm-*lr-md-*lr-lg-*
上下间隔tb-xs-*tb-sm-*tb-md-*tb-lg-*
<div class="vus-box lr-1 lr-xs-2 lr-sm-4 lr-md-6 lr-lg-8">
  <div
    class="vus-flex-1 vus-flex-xs-2 vus-flex-sm-3 vus-flex-md-4 vus-flex-lg-5"
  ></div>
</div>