弹性布局/栅格
使用弹性布局可以轻松在手机、Pad平板、电脑三种设备中得到更好的布局支持,它和table一样,但与table的区别在于结构简单、语法清晰、更自由
基础用法介绍

我们将页面宽度以百分比的形式划分为12个等级

ks-row 表示一行

ks-row 中添加 ks-col表示一列

ks-col 标签添加栅格属性:span/sm/pc/hd等

如何区分不同的设备

KSAUI为不同设备分配了不同的标签属性,下面是对应表

手机(<576px)|默认 平板(<1024px) 电脑(≥1024px) 高分屏(≥1900px)
span="*" sm="*" pc="*" hd="*"

因为宽度是百分比,如果你的项目不需要考虑1024以下的项目,可以直接用.ks-col-*

基础用法
手机6/12 | 电脑2/12 手机6/12 | 电脑10/12
手机3/12 | 平板5/12 | 电脑6/12 手机9/12 | 平板7/12 | 电脑6/12
加上边距
ks-row标签添加 spacing 属性, 属性值1-6
弹性布局 flex 左侧固定
默认min-width:100px
弹性布局 flex 右侧固定
默认min-width:100px
三列两边固定
左侧固定 中间高一点 右侧固定
同一个父级内混搭
1/12 2/12 2/12 3/12 4/12 12/12 1/12 5/12 6/12
12列 demo
11/12 1/12 10/12 2/12 9/12 3/12 8/12 4/12 7/12 5/12 6/12 6/12 5/12 7/12 4/12 8/12 3/12 9/12 2/12 10/12 1/12 11/12