@huteming/ui-flex

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-reverse	String	row
wrap	子元素的换行方式，可选 nowrap, wrap, wrap-reverse, true[相当于 wrap]	String, Boolean	nowrap
justify	子元素在主轴上的对齐方式，可选 start, end, center, between, around	String	start
align	子元素在交叉轴上的对齐方式，可选 start, center, end, baseline, stretch	String	stretch
alignContent	有多根轴线时的对齐方式，可选 start, center, end, between, around, stretch	String	stretch
gutter	子元素margin值	String	0

Flex.Item

属性	说明	类型	默认值
order	项目的排列顺序	Number	0
grow	项目的放大比例	Number	0
shrink	项目的缩小比例	Number	0
basis	分配多余空间之前，项目占据的主轴空间	String	auto
align	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性, 可选 auto, start, center, end, baseline, stretch	String	auto
gutter	元素margin值，会覆盖父元素的值	String