FlexboxLayout 实现 GridView 效果

Question

谷歌已经发布了FlexboxLayout库。现在我想使用FlexboxLayout来实现一个GridView效果，该GridView有两行和四个列表。如果项数少于8，则itemview将对齐到左侧。当我使用FlexboxLayout时，第二行中的项居中对齐，如何将它们对齐到左侧？

我对前端知之甚少。

以下是代码：

<com.google.android.flexbox.FlexboxLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/holo_green_light"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    app:flexWrap="wrap"
    app:alignItems="baseline"
    app:alignContent="stretch"
    app:justifyContent="space_around">

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

    <android.support.v7.widget.AppCompatButton
        android:background="@android:color/holo_red_dark"
        android:layout_width="80dp"
        android:layout_height="80dp"
        app:layout_flexBasisPercent="20%"/>

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

- Dio_V

Answer 1

改变：

app:alignItems="baseline"
app:alignContent="stretch"
app:justifyContent="space_around"

To:

app:flexWrap="wrap"
app:flexDirection="row"
app:alignItems="center"
app:alignContent="flex_start"
app:justifyContent="flex_start"

- himanshu1496

---

第二行的项目仍然居中对齐，每个项目保持同样的位置。 - Dio_V

请检查我的答案，现在您需要将justifyContent的值更改为flex_start。 - himanshu1496

当我将代码更改为“flex_start”时，似乎所有子项都会重叠在左上角。 - Dio_V

我已经尝试了您的代码，并且我的更新答案按照您的要求正常工作。请检查一下！ - himanshu1496