文档

Flexbox 弹性盒子

更新时间:

本文介绍了使用 Flexbox 弹性盒子组件的不同方式以及相关 API。

  • Kylin 工程中使用该组件。

  • 在其他工程中使用,需通过 ESModule 的方式来导入组件。

  • API 说明 提供了 props、slots 的接口信息。

此外,要查看该组件的视觉效果及示例代码,请参考本文 Demo

Kylin

<dependency component="{ Flexbox, FlexboxItem }" src="@alipay/antui-vue" ></dependency>

ESModule

import { Flexbox, FlexboxItem } from '@alipay/antui-vue';

API 说明

Flexbox

props

属性

说明

类型

默认值

direction

子元素的排列方式,可选 rowrow-reversecolumncolumn-reverse

String

'row'

wrap

子元素的换行方式,可选 nowrapwrapwrap-reverse

String

'nowrap'

justify

子元素在主轴上的对齐方式,可选 startendcenterbetweenaround

String

'start'

align

子元素在交叉轴上的对齐方式,可选 startcenterendbaselinestretch

String

'center'

alignContent

有多根轴线时的对齐方式,可选 startendcenterbetweenaroundstretch

String

'stretch'

slots

说明:默认 slot,填充布局内部内容。

属性:无。

FlexboxItem

props

FlexboxItem 组件默认加上了样式 flex: 1,保证所有 item 平均分宽度,Flexbox 容器的 children 不一定是 FlexboxItem。

slots

说明:默认 slot,填充元素内部内容。

属性:无。

Demo

基础样式

截图

代码

<template>
  <div>
    <Flexbox>
      <FlexboxItem>2列</FlexboxItem>
      <FlexboxItem>2列</FlexboxItem>
    </Flexbox>
    <Flexbox>
      <FlexboxItem>3列</FlexboxItem>
      <FlexboxItem>3列</FlexboxItem>
      <FlexboxItem>3列</FlexboxItem>
    </Flexbox>
    <Flexbox>
      <div class="placeholder">定宽 70px</div>
      <FlexboxItem>自适应</FlexboxItem>
    </Flexbox>
    <Flexbox>
      <FlexboxItem>3</FlexboxItem>
      <FlexboxItem class="am-ft-ellipsis">自定义个性化</FlexboxItem>
      <FlexboxItem>3</FlexboxItem>
    </Flexbox>
  </div>
</template>

<style lang="less" rel="stylesheet/less" scoped>
  .am-flexbox {
    margin: 10px 0;
  }

  .demo-item {
    padding: 6px 0;
    background: #4A89DC;
    border-radius: 4px;
    text-align: center;
    color: #fff;
  }

  .am-flexbox-item {
    .demo-item;
  }

  .placeholder {
    .demo-item;
    width: 70px;
    font-size: 12px;
    margin-left: 8px;
    margin-right: 8px;
  }

</style>

排列方向

截图

代码

<template>
  <div>
    <Flexbox>
      <div class="placeholder">1</div>
      <div class="placeholder">2</div>
      <div class="placeholder">3</div>
    </Flexbox>

    <Flexbox direction="row-reverse">
      <div class="placeholder">1</div>
      <div class="placeholder">2</div>
      <div class="placeholder">3</div>
    </Flexbox>
  </div>
</template>

<style lang="less" rel="stylesheet/less" scoped>
  .am-flexbox {
    margin: 10px 0;
  }

  .demo-item {
    padding: 6px 0;
    background: #4A89DC;
    border-radius: 4px;
    text-align: center;
    color: #fff;
  }

  .am-flexbox-item {
    .demo-item;
  }

  .placeholder {
    .demo-item;
    width: 70px;
    font-size: 12px;
    margin-left: 8px;
    margin-right: 8px;
  }

</style>

元素换行

截图

代码

<template>
  <div>
    <Flexbox>
      <div class="placeholder">1</div>
      <div class="placeholder">2</div>
      <div class="placeholder">3</div>
      <div class="placeholder">4</div>
      <div class="placeholder">5</div>
      <div class="placeholder">6</div>
      <div class="placeholder">7</div>
      <div class="placeholder">8</div>
      <div class="placeholder">9</div>
    </Flexbox>

    <Flexbox wrap="wrap">
      <div class="placeholder">1</div>
      <div class="placeholder">2</div>
      <div class="placeholder">3</div>
      <div class="placeholder">4</div>
      <div class="placeholder">5</div>
      <div class="placeholder">6</div>
      <div class="placeholder">7</div>
      <div class="placeholder">8</div>
      <div class="placeholder">9</div>
    </Flexbox>

    <Flexbox wrap="wrap-reverse">
      <div class="placeholder">1</div>
      <div class="placeholder">2</div>
      <div class="placeholder">3</div>
      <div class="placeholder">4</div>
      <div class="placeholder">5</div>
      <div class="placeholder">6</div>
      <div class="placeholder">7</div>
      <div class="placeholder">8</div>
      <div class="placeholder">9</div>
    </Flexbox>
  </div>
</template>

<style lang="less" rel="stylesheet/less" scoped>
  .am-flexbox {
    margin: 10px 0;
  }

  .demo-item {
    padding: 6px 0;
    background: #4A89DC;
    border-radius: 4px;
    text-align: center;
    color: #fff;
  }

  .am-flexbox-item {
    .demo-item;
  }

  .placeholder {
    .demo-item;
    width: 70px;
    font-size: 12px;
    margin: 8px;
  }

</style>

对齐方式

截图

代码

<template>
  <div>
    <Flexbox>
      <div class="placeholder">1</div>
      <div class="placeholder">2</div>
    </Flexbox>

    <Flexbox justify="center">
      <div class="placeholder">1</div>
      <div class="placeholder">2</div>
    </Flexbox>
  </div>
</template>

<style lang="less" rel="stylesheet/less" scoped>
  .am-flexbox {
    margin: 10px 0;
  }

  .demo-item {
    padding: 6px 0;
    background: #4A89DC;
    border-radius: 4px;
    text-align: center;
    color: #fff;
  }

  .am-flexbox-item {
    .demo-item;
  }

  .placeholder {
    .demo-item;
    width: 70px;
    font-size: 12px;
    margin-left: 8px;
    margin-right: 8px;
  }

</style>

交叉轴对齐方式

截图

代码

<template>
  <div>
    <Flexbox>
      <div class="placeholder">1</div>
      <div class="placeholder high">2</div>
      <div class="placeholder">3</div>
    </Flexbox>

    <Flexbox align="start">
      <div class="placeholder">1</div>
      <div class="placeholder high">2</div>
      <div class="placeholder">3</div>
    </Flexbox>

    <Flexbox align="stretch">
      <div class="placeholder">1</div>
      <div class="placeholder high">2</div>
      <div class="placeholder">3</div>
    </Flexbox>
  </div>
</template>

<style lang="less" rel="stylesheet/less" scoped>
  .am-flexbox {
    margin: 10px 0;
    background-color: #dedede;
  }

  .demo-item {
    padding: 6px 0;
    background: #4A89DC;
    border-radius: 4px;
    text-align: center;
    color: #fff;
  }

  .am-flexbox-item {
    .demo-item;
  }

  .placeholder {
    .demo-item;
    width: 70px;
    font-size: 12px;
    margin-left: 8px;
    margin-right: 8px;
  }

  .high {
    height: 100px;
  }

</style>

多轴对齐方式

截图

代码

<template>
  <div>
    <Flexbox wrap="wrap">
      <div class="placeholder">1</div>
      <div class="placeholder">2</div>
      <div class="placeholder">3</div>
      <div class="placeholder">4</div>
      <div class="placeholder">5</div>
      <div class="placeholder">6</div>
      <div class="placeholder">7</div>
      <div class="placeholder">8</div>
      <div class="placeholder">9</div>
    </Flexbox>

    <Flexbox wrap="wrap" align-content="start">
      <div class="placeholder">1</div>
      <div class="placeholder">2</div>
      <div class="placeholder">3</div>
      <div class="placeholder">4</div>
      <div class="placeholder">5</div>
      <div class="placeholder">6</div>
      <div class="placeholder">7</div>
      <div class="placeholder">8</div>
      <div class="placeholder">9</div>
    </Flexbox>
  </div>
</template>

<style lang="less" rel="stylesheet/less" scoped>
  .am-flexbox {
    margin: 10px 0;
    height: 200px;
    background-color: #dedede;
  }

  .demo-item {
    padding: 6px 0;
    background: #4A89DC;
    border-radius: 4px;
    text-align: center;
    color: #fff;
  }

  .am-flexbox-item {
    .demo-item;
  }

  .placeholder {
    .demo-item;
    width: 70px;
    font-size: 12px;
    margin: 8px;
  }

</style>
  • 本页导读 (0)
文档反馈