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 | |