Flexible box Model Flex Method Summary

Flexible layout

In 2009, the website presented a new scheme--flex layout (elastic layout), can be simple, complete, responsive to achieve a variety of page layout.

Traditional box models:
General layout We are all using the box model, with floating positioning to layout.
Row elements, inline block elements do not wrap, block elements are exclusive to one row. Floating allows the block element to be horizontal.
But some special layouts are difficult to implement. such as vertical centering.

After the elastic box is set, the elements inside the box have no line elements and block elements, and float will fail.

Elements with Flex layout, called Flex containers, for short containers
All child elements within a container are called flex projects, referred to as projects

Flex compatibility

Good compatibility In addition to IE other browsers

Properties of the container:

flex-direction: direction of spindle
Row (default): The spindle is horizontal and the starting point is on the left side.
Row-reverse: The spindle is in the horizontal direction, starting at the right end.
Column: The spindle is in the vertical direction, starting at the top edge.
Column-reverse: The spindle is in the vertical direction, starting at the bottom edge.

flex-wrap: How to wrap a line if one of the axes does not fit.
NoWrap (default): No Line break.
Wrap: Wrap, the first line is above.
Wrap-reverse: Line break, the first line is below.

justify-content: Alignment of the project on the spindle.
Flex-start (default): Left Justified
Flex-end: Right-justified
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.

Align-items: Defines how the item is aligned on the intersection axis.
Flex-start: The start alignment of the intersection axis.
Flex-end: The end alignment of the intersection axis.
Center: The midpoint alignment of the intersection axis.
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.

align-content: Defines the alignment of multiple axes. If the item has only one axis, this property does not work.
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): The axis fills the entire cross axis.

Properties of the project:

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

Flex-grow: Defines the magnification of the project, which defaults to 0, that is, if there is space left, do not zoom 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.

Flex-shrink: Defines the scale of the project, which defaults to 1, that is, if there is not enough space, the project will be scaled down.

flex-basis: The main spindle space that the project occupies before allocating extra space. 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.

align-self: 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. This property may take 6 values, except auto, and the other is exactly the same as the Align-items property.

flex:0 1 auto; flex:0 0 auto;
Does not enlarge does not shrink the abbreviated flex:none;
Flex:auto, can enlarge can reduce flex:1 1 auto;