weex 可用样式,与唯一布局方式flex

4 篇文章 0 订阅
4 篇文章 0 订阅

Weex 布局模型基于 CSS Flexbox,Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display:
flex; 属性。

对于刚开始接触 weex想把它当html5,css3使用的我,在没看文档的情况下也是蒙蔽了,
比如以级css样式,暂不支持简写 border:1px solid #fff 或者background :#ff4fe00;
以及line-height不在app标准里面,垂直居中必须使用flex的特性实现,意思就是你可以更加得心应手的使用flex 了,也不用申明display:flex,

摘录一点儿

Flex 容器

在 Weex 中,Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex; 属性。

flex-direction:

定义了 flex 容器中 flex 成员项的排列方向。可选值为 row | column,默认值为 column

column:从上到下排列。
row:从左到右排列。
justify-content

定义了 flex 容器中 flex 成员项在主轴方向上如何排列以处理空白部分。可选值为 flex-start | flex-end | center | space-between,默认值为 flex-start。

flex-start:是默认值,所有的 flex 成员项都排列在容器的前部;
flex-end:则意味着成员项排列在容器的后部;
center:即中间对齐,成员项排列在容器中间、两边留白;
space-between:表示两端对齐,空白均匀地填充到 flex 成员项之间。
justify-content @400*

align-items:

定义了 flex 容器中 flex 成员项在纵轴方向上如何排列以处理空白部分。可选值为 stretch | flex-start | center | flex-end,默认值为 stretch。

stretch 是默认值,即拉伸高度至 flex 容器的大小;
flex-start 则是上对齐,所有的成员项排列在容器顶部;
flex-end 是下对齐,所有的成员项排列在容器底部;
center 是中间对齐,所有成员项都垂直地居中显示。
align-items @400*

Flex 成员项

flex 属性定义了 flex 成员项可以占用容器中剩余空间的大小。如果所有的成员项设置相同的值 flex: 1,它们将平均分配剩余空间. 如果一个成员项设置的值为 flex: 2,其它的成员项设置的值为 flex: 1,那么这个成员项所占用的剩余空间是其它成员项的2倍。

flex {number}:值为 number 类型。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值