Flex layout learning experience and Flex layout learning experience

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-flowAttribute isflex-directionAttributes andflex-wrapThe 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-shrinkAndflex-basisThe 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.