Flex----------Flexible Layout

1. any container can be specified as a flex layout ,

Block-level elements: eg:.box{

Display:flex

}

Inline elements: eg:.box{

Dlsplay:inline-flex

}

WebKit Kernel Browser, must add-webkit prefix ..... (Safari browser)

* After the flex layout is set, the float, clear, vertical-align properties of the child elements are invalidated ....

2. Elements with flex layout, called Flex container, are referred to as "containers". All of its child elements automatically become container members, known as Flex items (Flex Item), or "project" for short.

3. Container properties:

(1) Flex-direction: Spindle direction (the direction of the project)

Value: Row |    Row-reverse |    Column | Column-reverse

• row(default): The spindle is in the horizontal direction, starting at the left.
• row-reverse: The spindle is in the horizontal direction, starting at the right end.
• column: The spindle is in the vertical direction and the starting point is in the upper edge.
• column-reverse: The spindle is in the vertical direction and the starting point is in the lower edge.

(2) Flex-wrap:

Value: nowrap (default, no line break) | Wrap (line break, first row above) |wrap-reverse (newline, first line below)

(3) Flex-flow: (is a flex-direction flex-wrap shorthand for attributes and attributes, the default value is row nowrap )

(4) Justify-content: (defines the alignment of the project on the spindle)

Value: Flex-start |   Flex-end | Center | Space-between |space-around

It may take 5 values, and the exact alignment is related to the direction of the axis. The following assumes that the spindle is from left to right.

• flex-start(default): Align Left
• flex-end: Align Right
• 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.

(5) Align-items: (Define how the item is aligned on the cross axis)

Value: Flex-start | Flex-end |center | Baseline | Stretch

It may take 5 values. The specific alignment is related to the direction of the cross axis, which assumes that the intersection axis is from top to bottom.

• flex-start: The starting point of the intersection axis is aligned.
• 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 set to auto, the height of the entire container will be filled.

(6) Align-content: (defines the alignment of multiple axes.) If the item has only one axis, this property does not work. )

Value: Flex-start | Flex-end |   Center |   Space-between | Space-around |stretch

• flex-start: Aligns with the start point of the intersection axis.
• flex-end: Aligns with the end point of the intersection axis.
• center: Aligns with the midpoint of the intersection axis.
• space-between: aligned with the intersection axis, evenly spaced between 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.

4. Properties of the project:

(1) Order (defines the order in which the items are arranged. The smaller the number, the higher the alignment, the default is 0)

(2) Flex-grow (defines the magnification of the project, by default, that is 0 , if there is space left, do not enlarge)

If all items have flex-grow properties of 1, they will divide the remaining space (if any). If an item has a flex-grow property of 2 and the other item is 1, the former occupies more than the remaining space.

(3) Flex-shrink (defines the scaling of the project, which defaults to 1, i.e. if there is not enough space, the project will be reduced)

If all items have a flex-shrink property of 1, they will be scaled down when there is not enough space. If an item has a flex-shrink property of 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 (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 the auto original size of the project)

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

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

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 Property

Allows individual items to be aligned differently from other items, overriding align-items properties. The default value auto , which represents the property that inherits the parent element align-items , is equivalent to if there is no parent element stretch .

Flex----------Flexible Layout