"39" Flexboxlayout usage Introduction

Flexboxlayout Introduction:

Flexbox, also known as the elastic box model or the Telescopic box model, is widely used for front-end development, and the front-end Web is known to have a powerful CSS grid grid style in Bootstrap. The emergence of Bootstrap greatly improves the efficiency of front-end development and leads to the trend of responsive layout and cross-platform development.

Flexboxlayout is a powerful control similar to the grid grid system in bootstrap but not the same, in fact it is closer to the elastic layout in front-end development

Photo Show:

Introduction to use:

Flexbox is a relatively powerful layout in the CSS field, we use LinearLayout + relativelayout in Android development to achieve most of the complex layout, but Google is thinking, there is no similar Flexbox One of the layouts? This use of a layout can handle all kinds of complex situations, so Flexboxlayout was born.

So Flexboxlayout is an open source project for Android platform that implements similar Flexbox layout schemes, open Source address:

How to use

The way to use it is simple, just add the following dependencies:

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

This is used in XML:

Property Description: Flexdirection

The Flexdirection property determines the direction of the spindle (that is, the direction in which the item is arranged). Similar to the linearlayout of vertical and horizontal.

There are four values to choose from:

Row (default): The spindle is horizontal and the starting point is on the left side.
Row-reverse: The spindle is in the horizontal direction, starting at the right end.
Column: The spindle is in the vertical direction, starting at the top edge.
Column-reverse: The spindle is in the vertical direction, starting at the bottom edge.

Flexwrap

By default Flex is the same as linearlayout, with no newline arrangement, but the Flexwrap property can support line wrapping. This one's more than a linearlayout. There are three values:

NoWrap: No Line break
Wrap: Wrap in normal direction
Wrap-reverse: Wrap in opposite direction

Justifycontent

The Justifycontent property defines how the item is aligned on the spindle.

Flex-start (default): Left Justified
Flex-end: Right-justified
Center: Center
Space-between: Justified, the interval between items is equal.
Space-around: The intervals on each side of the item are equal. Therefore, the interval between items is one times larger than the interval between items and borders.

Alignitems

The Alignitems property defines how the item is aligned on the secondary axis.

Flex-start: The start alignment of the intersection axis.
Flex-end: The end alignment of the intersection axis.
Center: The midpoint alignment of the intersection axis.
Baseline: The baseline alignment of the first line of text for the item.
Stretch (default): If the item is not set to height or auto, it fills the height of the entire container.

Aligncontent

The Aligncontent attribute defines the alignment of multiple axes. If the item has only one axis, this property does not work.

Flex-start: Aligns with the starting point of the intersection axis.
Flex-end: Aligns with the end of the intersection axis.
Center: Aligns with the midpoint of the intersection axis.
Space-between: aligned with the intersection axis and evenly spaced between the axes.
Space-around: The intervals between each axis are equal. Therefore, the spacing between the axes is one times larger than the interval between the axes and the border.
Stretch (default): The axis fills the entire cross axis.

Child element Attribute Layout_order

By default, the arrangement of the child elements is sorted sequentially in the order of the document flow, and the order property controls the ordering, with negative values before, and after the disaster, in order from small to large. We say that the reason why Flexboxlayout is relatively linearlayout is because some attributes compare to force, order is one of them.

Layout_flexgrow

The Layout_flexgrow property defines the magnification of the item, which defaults to 0, that is, if there is space left, it is not zoomed in. A picture to read. Same as the weight attribute in LinearLayout.

If all items have a Layout_flexgrow property of 1, they will divide the remaining space (if any). If the Layout_flexgrow property of one project is 2 and the other items are 1, the former occupies more than the remaining space.

Layout_flexshrink

The Layout_flexshrink property defines the scaling of the project, which defaults to 1, which means that if there is not enough space, the project shrinks.

If all items have a Layout_flexshrink property of 1, they will be scaled down when there is not enough space. If the Flex-shrink property of an item is 0 and the other items are 1, the former does not shrink when there is not enough space.
A negative value is not valid for this property.

Layout_alignself

The Layout_alignself property allows a single child element to be aligned differently from other child elements, overriding the Alignitems property. The default value is auto, which represents the Alignitems property that inherits the parent element, and, if there is no parent element, is equivalent to stretch.

Auto (default)
Flex_start
Flex_end
Center
Baseline
Stretch

This property may take 6 values, except auto, and the other is exactly the same as the Align-items property.

Layout_flexbasispercent

The Layout_flexbasispercent property defines the main size spindle space occupied by child elements before allocating extra space, and the browser calculates whether the spindle has extra space based on this property. Its default value is auto, which is the original size of the child element.

Welcome to the group: public number It face questions summary discussion group

If the scan does not go in, add me (rdst6029930) pull you. You are welcome to pay attention to the "It question summary" subscription number. Every day to push the classic face test and interview tips, are dry! The QR code of the subscription number is as follows:

Reference blog:

http://blog.csdn.net/github_14899071/article/details/51340863
(from Androiddevloper)
https://mp.weixin.qq.com/s?__biz=MzA4NTQwNDcyMA==&mid=2650661681&idx=1&sn= b151aba0c5fb702492f6bbd82211988d&scene=1&srcid=0516bbqrtnrtj1nwwvbn69o1&pass_ticket= Ovkeyzyza4up5gbygmh1nxrukwhardxsh6vnjdqmdi9ttfzwq4urcxfrp4trra3j#rd
Http://www.jcodecraeer.com/a/opensource/2016/0509/4233.html

"39" Flexboxlayout usage Introduction