CSS Classic Layout-flex

I personally think that CSS is amazing. CSS has a very classic layout--flex layout. Flex provides a lot of flexibility for the boxed model.

Flex has two axes: the horizontal spindle (main axis) and the vertical intersection axis (cross axis). The starting position of the spindle (the intersection with the border) is called main start, the end position is called the main end, the start position of the crossing axis is called Cross start, and the end position is called Cross end. The project is arranged by default along the spindle. The main axis space occupied by a single item is called the main size, and the occupied intersection space is called cross size.

(Image from Runoob)

First, Flex's six properties are:

• Flex-direction
• Flex-wrap
• Flex-flow
• Justify-content
• Align-items
• Align-content

1.flex-direction

The Flex-direction property determines the direction of the spindle (that is, the direction in which the item is arranged). It has a value of four

1 Flex-direction:row | row-reverse | column | column-reverse; 2     //row (default): The spindle is horizontal and the starting point is on the left side.  3    //row-reverse: The spindle is in the horizontal direction, starting at the right end.  4    //column: The spindle is in the vertical direction, starting point in the upper edge.  5    //column-reverse: The spindle is in the vertical direction, starting point in the lower edge. 

2.flex-wrap

By default, items are lined up in a line (also known as the "axis"). The Flex-wrap property defines how to wrap a line if one of the axes does not fit. It has a value of three.

1 Flex-wrap:nowrap | wrap | wrap-reverse 2     //nowrap (default): No Line break.  3    //wrap-reverse: Line break, the first line is below.  4    //wrap-reverse: line break, first line below

3.flex-flow

The Flex-flow property is a shorthand for the Flex-direction property and Flex-wrap property, and the default value is row nowrap

Flex-flow: <flex-direction> | | <flex-wrap>;

4.justify-content

The Justify-content property defines how the item is aligned on the spindle. It has a value of five

Justify-content:flex-start | Flex-end | Center | Space-between | Space-around;
Flex-start Align Left Center
Flex-end Align Right Center
Center Vertical 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.

5.align-items

The Align-items property defines how the item is aligned on the intersection axis. It has a value of five

Align-items:flex-start | Flex-end | Center | Baseline | Stretch    //flex-start: The start alignment of the intersection axis.    //flex-end: The end alignment of the intersection axis.    //center: The midpoint of the intersection axis is aligned.    //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.

6.align-content

The Align-content attribute defines the alignment of multiple axes. If the item has only one axis, this property does not work. It has a value of six

Align-content:flex-start | Flex-end | Center | Space-between | Space-around | Stretch    //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): Axis fills the entire cross axis

Second, the following 6 properties are set on the project.

• Order
• Flex-grow
• Flex-shrink
• Flex-basis
• Flex
• Align-self

1.order

The Order property defines the order in which the items are arranged. The smaller the number, the higher the alignment, and the default is 0.

Order: <integer>

2.flex-grow

The Flex-grow property defines the magnification of the item, which defaults to 0, that is, if there is space left, it is not zoomed in.

/**/

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

3.flex-shrink

The Flex-shrink 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 Flex-shrink 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.

4.flex-basis

The Flex-basis property defines the spindle space (main size) that the item occupies before allocating the extra space. Based on this property, the browser calculates whether the spindle has extra space. Its default value is auto, which is the original size of the project.

/**/

It can be set to the same value as the width or height property (such as 350px), then the item will occupy a fixed space.

5.flex

Flex properties are shorthand for Flex-grow, Flex-shrink, and flex-basis, and the default value is 0 1 auto. The latter two properties are optional.

Flex:none | [< ' Flex-grow ' > < ' Flex-shrink ';? | | < ' flex-basis ' >]　　　

This property has two shortcut values: Auto (1 1 Auto) and none (0 0 Auto).

It is recommended that you use this property instead of writing three separate properties separately, because the browser calculates the relevant values.

6.align-self

The Align-self property allows a single item to be aligned differently from other items, overriding the Align-items property. The default value is auto, which represents the Align-items property that inherits the parent element, and, if there is no parent element, is equivalent to stretch.

Align-self:auto | 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.

can also be viewed in the Rookie tutorial: http://www.runoob.com/w3cnote/flex-grammar.html

CSS Classic Layout-flex