开放原子开发者工作坊

      提到FlexboxLayout大家估计有点模糊，它是谷歌最近开源的一个android排版库，它的前身Flexbox是2009年W3C提出了一种新的布局，可以简便、完整、响应式的实现页面布局，Flexbox 是属于web前端领域CSS的一种布局方案。

首先：我们看一下它的属性。

 flexDirection:

     flexDirection属性是决定主轴的方向。好比LinearLayout的vertical(垂直) 和 horizontal(水平)方向。

     flexDirection有四个可选值：

• row：一般为默认值，主轴为水平方向，起点在左端。
• row-reverse: 主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

   如图：

  row：

  row-reverse:

  column：

  column-reverse：

 

 flexWrap：

     默认情况下是不支持换行排列。

• nowrap：不换行。
• wrap: 正常方向换行。
• wrap-reverse: 反方向换行。     

   如图：

wrap：

 

wrap-reverse：

 

 

 justifyContent:

     指定了项目在主轴上的对齐方式。

• flex-start: 默认值为左对齐。
• flex-end: 右对齐。
• center: 居中。
• space-between: 两端对齐，其间间距相等。
• space-around: 两侧间距相等。

 如图：

space-around:

 

alignltems:

     指定项目在副轴轴上的对齐方式。

• flex-start: 交叉轴的起点对齐。(上)
• flex-end:  交叉轴的终点对齐。(下)
• center:     交叉轴的中点对齐。(中间线)
• baseline:  第一行文字的基线对齐。()
• stretch:   默认值是占满整个容器的高度，在未设置高度或者为auto。 

     如图：

     flex-start:

    

     flex-end:

    

   center:

   

   baseline:基线跟图一类似

   

   stretch:默认

   

    alignContent:

    指定多根轴线的对齐方式，如果只有一条轴，该属性不起任何作用。

• flex-start: 与交叉轴的起点对齐。
• flex-end:  与交叉轴的终点对齐。
• center:     与交叉轴的中点对齐。
• space-between:  与交叉轴的两端对齐，轴线之间的间隔分布均匀。
• space-around:   每根轴线两侧的间隔相等。 
• stretch: 默认值为轴线占满整个交叉轴。   

子元素的属性：

      layout_order:默认情况下子元素的排列方式按照文档流的顺序依次排序，而order可以控制排列的顺序，负值在前，正直灾后，按照从小到大的顺序一次排列。

     

      layout_flexGrow:指定项目的放大比例，默认为0，如果存在剩余空间，也不放大。如果为1，等分剩余空间。

 

      layout_flexShrink:缩小比例，默认为1，空间不足，项目缩小。如果属性都为1，空间不足时，将等比缩小。负值无效。

 

      layout_alignSelf:允许单个子元素与其它子元素有不一样的对齐方式，可覆盖alignltems属性，默认值为auto，表示继承父元素的alignltems属性，如没有父元素，则等同于stretch。

      该属性有6个值，除了auto，其它都与align-items属性一样。

      layout_flexBasisPercent:指定了在分配多余空间之前，子元素占据的main size主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即子元素的本来大小。图片后续附上。

   activity_main.xml

<com.google.android.flexbox.FlexboxLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/flexbox_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:alignContent="flex_start"
    app:alignItems="flex_start"
    app:flexWrap="wrap"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main">


    <TextView
        android:id="@+id/textview1"
        style="@style/FlexItem"
        android:layout_width="@dimen/flex_item_length2"
        android:layout_height="@dimen/flex_item_length"
        android:text="@string/one" />

    <TextView
        android:id="@+id/textview2"
        style="@style/FlexItem"
        android:layout_width="@dimen/flex_item_length3"
        android:layout_height="@dimen/flex_item_length"
        android:text="@string/two" />

    <TextView
        android:id="@+id/textview3"
        style="@style/FlexItem"
        android:layout_width="@dimen/flex_item_length"
        android:layout_height="@dimen/flex_item_length"
        android:text="@string/three" />

</com.google.android.flexbox.FlexboxLayout>

添加依赖：

compile 'com.google.android:flexbox:0.1.2'

 

源码git上有，大家可以去git上下载。