Introduction Of Flexbox Layout

Flexbox layout:-

Flexbox layout is a new layout introduced by google. It gives a developer to design more easily. Flexbox layout has some attributes that will help you to design the layout in an easy way.

Use FlexLayout in android you need to add Gradle.

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

Flex layout Attributes:-

         

1. Flex-Direction

2. FlexWrap

3. JustifyContent

4. AlignItems

5. AlignContent

6. ShowDividerHorizontal

7. DividerDrawableHorizontal

8. DividerDrawable

Attributes with Values :

==> flexDirection :-

This attribute sets the direction of the child in the layout. The values should be

                                              

a) row (Default)        :-  This property is set the child direction to horizontal.  

b) row_reverse         :-  This property is set the child direction to horizontal in reverse order.

c) column                 :-  This property is set the child direction to vertical.  
d) column_reverse   :-  This property is set the child direction to vertical in reverse order.

==> alignContent :-   

This attribute sets the alignment of the child in the layout. The values should be.

a) stretch (Default)     :- This property has not changed the size of the control. The control looks the same as your design in the XML.

b) flex_start                :- This property aligns the content of the layout to start and wrap it sizes to the lowest height in the row.

c) flex_end                 :-  This property aligns the content of the layout to end and wrap it sizes to the lowest height in the row.

d) center                    :-   This property aligns the content of the layout to center and wrap it sizes to the lowest height in the row.

e) space_between     :-  This property sets the default space between the two-element (row and column-wise space).

f)  space_around       :-  This property sets the default space between the two-element (row and column-wise space) to the top and bottom of the element.       

                                              

==> flexWrap :- 

The attribute controls whether the flex the container is single-line or multi-line.The values should be

a) wrap                 :- Allow the content to set in multiline.

b) nowrap             :- Allow the content to set in a single line.

c) wrap_reverse   :- Allow the content to set in multiline in reverse order.

==>  alignItems :-

The values should be

                  

a) stretch  (Default)    :- This property is set the content to match parent.

b) flex_start                :- This property aligns the content of the layout to start.

c) flex_end                 :- This property aligns the content of the layout to the end.

d) center                    :- This property aligns the content of the layout to the center.

                                     

==>  showDivider :- 

This attribute shows the divide. The values should be

a) none          :- This property has hidden the divider.
b) middle       :- This property shows the divider in the middle.
c) beginning  :- This property shows the divider in the beginning.
d) end           :- This property shows the divider in the end.

==> dividerDrawable:- 

The attribute allows you to set the custom drawable for your divider.

Attributes for the children of a FlexboxLayout

 ==> layout_order:-

This attribute can change how the ordering of the children's views is laid out. By default, children are displayed and laid out in the same order as they appear in the layout XML If not, 1 is set as a default value.

 ==> layout_flexShrink

This attribute determines how much this child will shrink if negative free space is distributed relative to the rest of other flex items included in the same flex line. If not specified, 1 is set as a default value.

 ==> layout_flexBasisPercent

The initial flex item length in a fraction format relative to its parent. The initial main size of this child view is trying to be expanded as the specified fraction against the parent's main size. If this value is set, the length specified from layout_width (or layout_height) is overridden by the calculated value from this attribute. This attribute is only effective when the parent's length is definite (MeasureSpec mode isMeasureSpec.EXACTLY). The default value is -1, which means not set.