基于flexbox的等分弹性列
<div class="v-cols is-multiline">
<div class="v-col">
<code>.v-col</code>
</div>
</div>.v-col
通过修饰符is-(1~12)可以灵活控制列的尺寸 .
<div class="v-cols">
<div class="v-col is-3"></div>
<div class="v-col is-3"></div>
<div class="v-col is-6"></div>
</div>
<div class="v-cols">
<div class="v-col is-3"></div>
<div class="v-col">不设置将会撑满剩余空间</div>
</div>.is-3
不设置将会撑满剩余空间
.is-{{ el }}
.is-{{ el }}
框架内置了些有语义の修饰符 .
[v-col].is-three-quarters
[v-col].is-two-thirds
[v-col].is-half
[v-col].is-one-third
[v-col].is-one-quarter
[v-col].is-full // 强制占满行容器
is-half
is-half
通过修饰符[v-cols].is-gapless可以取消间隙
{{ el }}
通过修饰符[v-col].is-offset-(1~12)可以偏移列间隙
.is-3
.is-offset-3
目前列之间的间隙为0.5rem,即 16px * 0.5 * 2 = 16px . 如果希望调整这个参数，可以在Advanced章节中找到自定义的办法.
{tip}
[v-cols].is-centered // 子元素水平居中
[v-cols].is-multiline // 子元素填充满后换行
[v-cols].is-vcentered // 子元素垂直居中