「大部分內(nèi)容是實(shí)踐 + 翻譯自官方文檔」

摘要

這個(gè)規(guī)范描述了一個(gè)為用戶界面設(shè)計(jì)所進(jìn)行了優(yōu)化的 CSS 框架模型逮刨。在這個(gè)彈性布局模型中促绵，子元素可以以任何方向設(shè)置，子元素設(shè)置可以充滿未用的布局空間或者縮小空間以避免溢出父控件的布局“和海可以輕松操作子元素的水平排列或豎直排列。嵌套布局(水平內(nèi)部垂直杜窄，或者垂直內(nèi)部水平)可以在兩個(gè)維度上構(gòu)建布局肠骆。

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

簡(jiǎn)單使用

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    app:alignContent="flex_start"
    app:alignItems="stretch"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="flex_start"
    tools:context="com.badmask_zly.flexboxlayoutdemo.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Hello World!" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Monday" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Tuesday" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Wednesday" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Thursday" />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/bg_red"
        android:padding="5dp"
        android:text="Friday" />

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

顯示如下：

簡(jiǎn)單使用.png

屬性介紹 -- 順序和方向 ：

flexDirection : 決定子 item 在 FlexboxLayout 布局中的展示方向。

flexWrap : 決定 FlexboxLayout 布局中子 item 呈現(xiàn)一行還是多行，決定與 flexDirection 所決定方向的垂直方向的展示

app:layout_order :

FlexboxLayout 布局中子 item 可以設(shè)置這個(gè)屬性。默認(rèn)情況下别垮，所有的 item 的 order 值都相同便监。值越小，越靠前碳想。

屬性介紹 -- 靈活性 ：

layout_flexGrow :

相當(dāng)于 LinearLayout 布局中的 layout_weight 屬性烧董。

layout_flexShrink :

屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1胧奔，即如果空間不足逊移，該項(xiàng)目將縮小。
如果所有項(xiàng)目的 layout_flexShrink 屬性都為1龙填，當(dāng)空間不足時(shí)胳泉，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0岩遗，其他項(xiàng)目都為1扇商，則空間不足時(shí)，前者不縮小宿礁。負(fù)值對(duì)該屬性無(wú)效案铺。僅在單行時(shí)，此屬性有效梆靖。

layout_flexBasisPercent :

值為一個(gè)百分比控汉，表示設(shè)置子元素的長(zhǎng)度為它父容器長(zhǎng)度的百分比，如果設(shè)置了這個(gè)值返吻，那么通過(guò)這個(gè)屬性計(jì)算的值將會(huì)覆蓋layout_width或者layout_height的值姑子。注意：此屬性在 FlexboxLayout 的寬度設(shè)置為 wrap_content 時(shí)，测僵。默認(rèn)值時(shí)-1街佑。

屬性介紹 -- 基準(zhǔn) ：

justifyContent :

alignItems ：屬性控制元素在副軸方向的對(duì)齊方式，有以下5種取值：

待繼續(xù) ～ 「 與 RecyclerView 的使用」