FlexboxLayout is a newly introduced library in android and alike CSS Flexible Box Layout Module to Android it has the same ability. Flexbox Layout works similar to the LinearLayout in android, it places children view sequentially. Each child view takes place one after another. It also extends ViewGroup similar to the LinearLayout and RelativeLayout.

You can add different attributes to the flexbox layout like flexDirection, flexWrap, justifyContent, alignItems and alignContent. There are some more attributes to that you can add to the flexbox layout child view.

Step-1 Add the following dependency to build.gradle file

dependencies {
    compile 'com.google.android:flexbox:0.2.1'
}

Step-2 Create a new XML file flexbox_layout.xml and add following code of line inside this layout with attributes com.google.android.flexbox.FlexboxLayout.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    app:alignContent="stretch"
    app:alignItems="stretch"
    app:flexDirection="row"
    app:flexWrap="wrap">

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="5dp"
        android:background="#80ff0000"
        app:layout_alignSelf="baseline" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="5dp"
        android:background="#8000ffd0"
        app:layout_alignSelf="baseline" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="5dp"
        android:background="#800066ff"
        app:layout_alignSelf="baseline" />

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

Step-3 Supported Attributes

     flexDirection :- This attribute determines the direction of child view which are inside of flexbox layout. This attributes also helps to control whether child view will be in single line or multiple lines.

1. row (default)
2. row_reverse
3. column
4. column_reverse

     justifyContent :- This attributes control alignments from the main axis. This has five important variables.

1. flex_start (default)
2. flex_end
3. center
4. space_between
5. space_around

    alignItems :- This attributes control size and position of child view base from cross axis. This also has five variables.

1. stretch (default)
2. flex_start
3. flex_end
4. center
5. baseline

    alignContent :- This attribute controls the alignment of the flex lines in the flex container. Possible variables are below.

1. stretch (default)
2. flex_start
3. flex_end
4. center
5. space_between
6. space_around