本文介绍了使用 Flexbox 弹性盒子组件的不同方式以及相关 API。
此外,要查看该组件的视觉效果及示例代码,请参考本文 Demo。
Kylin
<dependency component="{ Flexbox, FlexboxItem }" src="@alipay/antui-vue" ></dependency>
ESModule
import { Flexbox, FlexboxItem } from '@alipay/antui-vue';
API 说明
Flexbox
props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
direction | 子元素的排列方式,可选 | String |
|
wrap | 子元素的换行方式,可选 | String |
|
justify | 子元素在主轴上的对齐方式,可选 | String |
|
align | 子元素在交叉轴上的对齐方式,可选 | String |
|
alignContent | 有多根轴线时的对齐方式,可选 | String |
|
slots
说明:默认 slot,填充布局内部内容。
属性:无。
FlexboxItem
props
FlexboxItem 组件默认加上了样式 flex: 1
,保证所有 item 平均分宽度,Flexbox 容器的 children 不一定是 FlexboxItem。
slots
说明:默认 slot,填充元素内部内容。
属性:无。
Demo
基础样式
截图
![](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/72554/AntCloud_zh/1564107428771/Flexbox%20%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E2%80%94%E5%9F%BA%E7%A1%80%E6%A0%B7%E5%BC%8F.png)
代码
<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>
排列方向
截图
![](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/72554/AntCloud_zh/1564107469922/Flexbox%20%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E2%80%94%E6%8E%92%E5%88%97%E6%96%B9%E5%90%91.png)
代码
<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>
元素换行
截图
![](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/72554/AntCloud_zh/1564107509852/Flexbox%20%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E2%80%94%E5%85%83%E7%B4%A0%E6%8D%A2%E8%A1%8C.png)
代码
<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>
对齐方式
截图
![](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/72554/AntCloud_zh/1564107557049/Flexbox%20%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E2%80%94%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F.png)
代码
<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>
交叉轴对齐方式
截图
![](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/72554/AntCloud_zh/1564107600243/Flexbox%20%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E2%80%94%E4%BA%A4%E5%8F%89%E8%BD%B4%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F.png)
代码
<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>
多轴对齐方式
截图
![](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/pic/72554/AntCloud_zh/1564107662782/Flexbox%20%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E2%80%94%E5%A4%9A%E8%BD%B4%E5%AF%B9%E9%BD%90%E6%96%B9%E5%BC%8F.png)
代码
<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>
文档内容是否对您有帮助?