Preface Overview:
The function of flexible layout is similar to the composite version of LinearLayout and RelativeLayout in Android, namely: support for horizontal layout, vertical layout, start, end, center layout, width and height proportional division, etc. Of course, there are many more Other functions, such as automatic line wrapping, sorting by specified order, etc. In short, with Android foundation, it is easy to understand flexible layout flex.
It can be understood that the traditional web page layout is accomplished through display, position and float. With the help of block-level elements, inline element characteristics, combined with relative layout, absolute layout, and fixed layout specified by position, various types of layout effects can be achieved. . If you need to float, use float.
However, this traditional method is more complicated to use, and some typesetting effects are not easy to achieve, such as listing, centering, and responsive layout effects.
And flex can complete the traditional layout work well, and it can also support responsive layout.
1. Basic concepts
Axis:
When using flex layout, the first thing that comes to mind is two axes: the main axis and the cross axis. The main axis is defined by the flex-direction, and the other axis is perpendicular to it. All the properties of flexbox we use are related to these two axes, so it is necessary to understand it at the beginning.
Understanding the concepts of main axis and cross axis is very important for aligning elements in flexbox; because the characteristic of flexbox is to align the elements along the main or cross axis.
Layout blank:
available space, roughly speaking, the size of the flex container deducts the remaining area beyond the space specified by the flex-basis of items. Flex-basis usually refers to the size of the item itself, of course, it can also be set manually.
Some properties of flex are achieved by changing the layout blank allocation in the flex container to achieve effects such as alignment.
For example, the flex-grow stretch of items or the justify-content spindle alignment of the flex container, etc. In fact, these layout blanks are allocated to each item according to different algorithms. When assigned to the item, it is directly filled into the content of the item to achieve the stretch The effect is to simply surround the blank around the item to achieve a similar margin effect to achieve the center, left, right, and equal alignment of the item.
It doesn't matter if you don't understand the specific attributes. The following chapters will talk about it, just know the concept.
2.fl ex-related attributes
Set display: flex to any block-level element label to make this element exist as a flex container, and flex-related attributes can also be used.
There are not many flex attributes, there are only 13 at present, of which 7 are the attributes used by the flex flexible box container itself, and 6 are the attributes used by the children of the flex-item flexible box. Among them, some attributes just concentrate and simplify the use of other attributes. Therefore, there are not many attributes that really have layout purposes, and they are easy to master.
Attributes acting on the flex flexible box container:
flex-direction
syntax format:
flex-direction: row(default) | row-reverse | column | column-reverse
It is used to set the direction of the main axis. Flex is divided into two concepts: main axis and cross axis. When the items are laid out, they are carried out along the main axis by default. Therefore, the horizontal or vertical layout of items can be realized by setting whether the main axis is horizontal or vertical.
- row: the default value, set the main axis to the horizontal direction
- column: set the main axis to the vertical direction
Other attributes will not be introduced, because there are two main axis directions, either horizontal or vertical. The other difference lies in whether it is from left to right or from right to left when horizontal, so the LTR and LTR, one of the influencing factors of this attribute RTL, but there is no need to think about it so much. These scenarios should not be many. It is enough to know that this is used to set the main axis direction, I think.
Example:
