Flex布局

更新时间:2017/08/18 访问次数:2899

Flex 是 Flexible Box 的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性。元素排列默认主轴为水平方向,起点在左端。项目都排在一条线,默认不换行。

子元素在父节点内的水平对齐方式 - 居左(start)、居中(center)、居右(end)、等宽排列(between)排列。子元素与子元素之间,支持顶部对齐(start)、垂直居中对齐(center)、底部对齐的方式(end)。

Flex

参数 可选值 类型 默认值
direction row,column String row
wrap nowrap,wrap String nowrap
justify start,end,center,between String start
align start,end,center String center

Flex.Item

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

在线演示

https://h5.m.taobao.com/qn/mobile/weex-tpl.html?_wx_tpl=https://g.alicdn.com/nuke/flex/0.0.5/basic.js

https://h5.m.taobao.com/qn/mobile/weex-tpl.html?_wx_tpl=https://g.alicdn.com/nuke/flex/0.0.5/layout.js

扫码体验

使用千牛客户端或者集成Weex的客户端扫码体验。

FAQ

关于此文档暂时还没有FAQ
返回
顶部