1.1.2 flex布局

说明: 应用在需要灵活使用各种布局的场景

复制好对应的html,添加所需的class即可,可拓展性强

效果展示

1.均分布局, 每一块的宽度均是一样的. xui-flex类名主要控制的是以flex布局,xui-col-1主要控制的是子元素的宽度1

100%
50%
50%
33.3%
33.3%
33.3%
<div class="xui-flex xui-col-24">
    <div class="xui-flex xui-col-1">100%</div>
</div>
<div class="xui-flex">
    <div class="xui-flex xui-col-1">50%</div>
    <div class="xui-flex xui-col-1">50%</div>
</div>
<div class="xui-flex">
    <div class="xui-flex xui-col-1">33.3%</div>
    <div class="xui-flex xui-col-1">33.3%</div>
    <div class="xui-flex xui-col-1">33.3%</div>
</div>
...

2.均分布局, 同时需要子元素有一定的间距. PS: 最后一个元素没有边距

100%
50%
50%
33.3%
33.3%
33.3%
<div class="xui-flex xui-col-24">
    <div class="xui-flex xui-col-1">100%</div>
</div>
<div class="xui-flex">
    <div class="xui-flex xui-col-1">50%</div>
    <div class="xui-flex xui-col-1">50%</div>
</div>
<div class="xui-flex">
    <div class="xui-flex xui-col-1">33.3%</div>
    <div class="xui-flex xui-col-1">33.3%</div>
    <div class="xui-flex xui-col-1">33.3%</div>
</div>
...

3.均分布局, 子元素至上而下排列,同时需要子元素有一定的间距. PS: 最后一个元素没有边距

100%
50%
50%
33.3%
33.3%
33.3%
<div class="xui-flex">
    <div class="xui-flex xui-col-1">100%</div>
</div>
<div class="xui-flex xui-flex-vertical-10 xui-flex-vertical">
    <div class="xui-flex xui-col-1">50%</div>
    <div class="xui-flex xui-col-1">50%</div>
</div>
<div class="xui-flex xui-flex-vertical-10 xui-flex-vertical">
    <div class="xui-flex xui-col-1">33.3%</div>
    <div class="xui-flex xui-col-1">33.3%</div>
    <div class="xui-flex xui-col-1">33.3%</div>
</div>
...

results matching ""

    No results matching ""