@Author:莫川
一、前言
作为一个android开发者,使用xml写UI,实在是太方便了。最近学习Weex,需要使用css来布局。学成之后,发现使用CSS的Flex布局样式也非常方便。在css中,使用flex布局,需要添加display属性,当然,Weex默认使用的display属性就是flex。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
二、使用CSS写布局
2.1 线性布局实现
对于android开发者而言,使用LinearLayout写线性布局;使用CSS的话,无论是线性或者相对,都是使用div标签。div标签有点相当于android的ViewGroup一样。
2.1.1 方向
(1).垂直方向(从上到下)
android:
android:orientation=“vertical”
flex:
flex-direction: column;
(2).水平方向(从左向右)
android:
android:orientation=“horizontal”
flex:
flex-direction: row;
比如,写一个左右方向的布局:
<div style="display:flex;flex-direction:row;">
<div style="width:40px;height:100px;background-color:#ff0000;">
</div>
<div style="width:100px;height:100px;background-color:#fffff">
</div>
<div style="width:80px;height:100px;background-color:#ff0000">
</div>
</div>
效果为:
2.1.2 权重
在android中,线性布局LinearLayout可以设置android:weightSum属性,其子元素可以设置android:layout_weight属性,用于等分的效果。比如:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100px"
android:background="#ffffff"
android:orientation="horizontal"
android:weightSum="3" >
<TextView
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="1"
android:background="#ff0000"
android:textColor="#000000" />
<TextView
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="2"
android:gravity="center"
android:text="2"
android:background="#0000ff"
android:textColor="#000000" />
</LinearLayout>
在flex中,则使用flex属性即可。比如:
<div style="display:flex;flex-direction:row;width:300px">
<div style="height:100px;flex:1;background-color:#ff0000;">
</div>
<div style</