4.0.0 • Published 4 years ago

@huteming/ui-flex v4.0.0

Weekly downloads
1
License
ISC
Repository
-
Last release
4 years ago

Flex 是 CSS flex 布局的一个封装。

例子

基础布局

:::demo

<tm-flex class="mb-20">
    <tm-flex-item :grow="1">
        <div class="placeholder">无间距</div>
    </tm-flex-item>
    <tm-flex-item :grow="1">
        <div class="placeholder">无间距</div>
    </tm-flex-item>
</tm-flex>

<tm-flex class="mb-20" gutter="0 8px">
    <tm-flex-item :grow="1">
        <div class="placeholder">8px间距</div>
    </tm-flex-item>
    <tm-flex-item :grow="1">
        <div class="placeholder">8px间距</div>
    </tm-flex-item>
</tm-flex>

<tm-flex gutter="0 8px">
    <tm-flex-item :grow="1">
        <div class="placeholder">8px</div>
    </tm-flex-item>
    <tm-flex-item :grow="1" gutter="0 15px">
        <div class="placeholder">自定义15px间距</div>
    </tm-flex-item>
    <tm-flex-item :grow="1">
        <div class="placeholder">8px</div>
    </tm-flex-item>
</tm-flex>

:::

换行

:::demo 

<template>
<tm-flex wrap="wrap" gutter="0 15px">
    <tm-flex-item>
        <div class="placeholder inline">Block</div>
    </tm-flex-item>

    <tm-flex-item>
        <div class="placeholder inline">Block</div>
    </tm-flex-item>

    <tm-flex-item>
        <div class="placeholder inline">Block</div>
    </tm-flex-item>

    <tm-flex-item>
        <div class="placeholder inline">Block</div>
    </tm-flex-item>
</tm-flex>
</template>

:::

交叉轴对齐

:::demo 

<template>
<tm-flex wrap="wrap" gutter="0 15px">
    <tm-flex-item>
        <div class="placeholder inline">Block</div>
    </tm-flex-item>

    <tm-flex-item>
        <div class="placeholder inline">Block</div>
    </tm-flex-item>

    <tm-flex-item>
        <div class="placeholder inline">Block</div>
    </tm-flex-item>

    <tm-flex-item>
        <div class="placeholder inline">Block</div>
    </tm-flex-item>
</tm-flex>
</template>

:::

主轴对齐

:::demo 

<template>
<tm-flex class="mb-20">
    <tm-flex-item :grow="1">
        <div class="placeholder small"></div>
    </tm-flex-item>
    <tm-flex-item :grow="1">
        <div class="placeholder"></div>
    </tm-flex-item>
    <tm-flex-item :grow="1">
        <div class="placeholder large">默认 stetch</div>
    </tm-flex-item>
</tm-flex>

<tm-flex align="center">
    <tm-flex-item :grow="1">
        <div class="placeholder small"></div>
    </tm-flex-item>
    <tm-flex-item :grow="1">
        <div class="placeholder"></div>
    </tm-flex-item>
    <tm-flex-item :grow="1">
        <div class="placeholder large">center</div>
    </tm-flex-item>
</tm-flex>
</template>

:::

API

Flex

属性说明类型默认值
direction项目定位方向，值可以为 row,row-reverse,column,column-reverseStringrow
wrap子元素的换行方式，可选 nowrap, wrap, wrap-reverse, true[相当于 wrap]String, Booleannowrap
justify子元素在主轴上的对齐方式，可选 start, end, center, between, aroundStringstart
align子元素在交叉轴上的对齐方式，可选 start, center, end, baseline, stretchStringstretch
alignContent有多根轴线时的对齐方式，可选 start, center, end, between, around, stretchStringstretch
gutter子元素margin值String0

Flex.Item

属性说明类型默认值
order项目的排列顺序Number0
grow项目的放大比例Number0
shrink项目的缩小比例Number0
basis分配多余空间之前，项目占据的主轴空间Stringauto
align允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性, 可选 auto, start, center, end, baseline, stretchStringauto
gutter元素margin值，会覆盖父元素的值String
@everything-registry/sub-chunk-406@infinitebrahmanuniverse/nolb-_hut@huteming/ui@zalastax/nolb-_hut
4.0.0

4 years ago

1.2.2-alpha.1

5 years ago

1.2.2-alpha.0

5 years ago

1.2.1-alpha.0

5 years ago

1.1.3-alpha.0

5 years ago

1.1.2-alpha.0

5 years ago

1.1.1

5 years ago

1.0.1

5 years ago