Flex layout learning experience and Flex layout learning experience
As another new way of css layout, Flex has a strong use effect. Compared with the original float, position operations on element styles are more concise, this article is my learning experience and experience. If you have any mistakes or shortcomings, please give me some advice.
Let's go to the topic. First of all, I will borrow a copy of the picture from Dr. Ruan Yifeng:
Let's talk about several attributes of flex:
I. Container Properties
1. flex-direction: row | row-reverse | column | column-reverse;
This attribute defines the order of elements on the main axis, that is, the preceding (main axis)
Row:Elements are arranged horizontally on the spindle, and the starting point is on the left side (this is also the default value)
Row-reverse:The elements are arranged horizontally on the spindle, And the start point is on the right side.
Column:Elements are arranged vertically on the spindle, and the starting point is above
Column-reverse:Elements are arranged vertically on the spindle, and the starting point is below
Simply do not practice fake tricks and paste the Code:
The effect is as follows:
2. flex-wrap:nowrap | wrap | wrap-reverse;
This attribute defines how to arrange an element if it cannot be arranged on a single axis:
Nowrap:Do not wrap (default)
Wrap:Line feed, and the first line is above
Wrap-reverse:Line feed. The first line is arranged in reverse order below
Code pasting:
The effect is as follows:
3. flex-flow:flex-flow
Attribute isflex-direction
Attributes andflex-wrap
The abbreviation of an attribute. The default value isrow nowrap
4. justify-content:flex-start | flex-end | center | space-between | space-around
This attribute defines the alignment of elements on the spindle.
Flex-start:Spindle start point alignment (default)
Flex-end:End Point alignment of the spindle
Center:Midpoint alignment of the spindle
Space-:The two ends are aligned, and the elements are separated equally.
Space-around:The two sides of an element are separated equally, and the elements and two ends are aligned.
Code pasting:
The effect is as follows:
5. align-items:flex-start | flex-end | center | baseline | stretch
This attribute is relative to justify-content, which specifies the alignment of elements on the cross axis.
Flex-start:Starting point alignment of the cross axis
Flex-end:End Point alignment of the cross axis
Center:Midpoint alignment of the cross axis
Baseline:Align the first line of text of the project
Stretch:If the height of an element is not set or set to auto, the element occupies the height of the container.
Paste the Code:
The effect is as follows:
6. align-content:flex-start | flex-end | center | space-between | space-around | stretch;
This attribute specifies the alignment mode when Multiple Axes exist. If there is only one axis, it does not work.
Flex-start:Align with the starting point of the cross axis
Flex-end:Align with the end point of the cross axis
Center:Align with the end point of the intersection
Space-:Alignment with the two ends of the cross axis. The distance between the axes is equal.
Space-around:The distance between the two sides of each axis is equal.
Stretch:The axis occupies the entire cross axis
Ii. Element attributes
1. order:<integer>
This attribute defines the order of elements. The smaller the value, the higher the order. The default value is 0.
Paste the Code:
The result is as follows:
2.Flex-grow:<number>
This attribute defines the element zoom-in ratio. The default value is 0, indicating that the element is not zoomed in even if there is space available.
If the value of all elements is 1, these elements are equally divided into the remaining space. If one element is greater than 1, the remaining space occupied by this element is N times larger than other elements.
Paste the Code:
The effect is as follows:
3. flex-shrink:<number>
This attribute defines the scale-down ratio of elements. The default value is 1. If the remaining space is insufficient, the elements are reduced.
If the attribute of all elements is 1, the proportional scaling is reduced when the space is insufficient. If the attribute of an element is 0 and the remaining value is 1, when the space is insufficient, the element whose attribute is 0 is not reduced.
Paste the Code:
The effect is as follows:
Note: Negative values do not apply to this attribute.
4. flex-basis:<length> | auto
This attribute defines the size of the element that occupies the main axis before the excess space is allocated, to calculate whether there is additional space on the main axis. The default value is auto, that is, the original size of the element.
5. flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
This attribute isflex-grow
,flex-shrink
Andflex-basis
The default value is (0 1 auto)
This property has two shortcut values: auto and none.
Paste code
The effect is as follows:
I understand these three attributes as follows:Flex-growIt is equivalent to a large number of landlords who prepare to divide the main axis of the "land", but there are also relatively powerful landlords. For example, if the property value is higher, they will divide more land,
WhileFlex-shrinkIt is equivalent to a group of good friends who help each other. If the "land" of the main axis is not enough, everyone will reduce the "land" together, but there is a bully in it, that is, the attribute value is 0, no matter how many
In his opinion, there is no such thing as love. LastFlex-basisIt is equivalent to calculating the remaining "land" of the main axis. After calculation, let the two attributes divide the remaining "land" by themselves ".
Of course, flex also has a disadvantage, that is, its compatibility with mobile browsers has not yet been completed, and some mobile browsers cannot be identified yet.