Android布局与CSS的Flex布局的对应关系

@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