CSS3 Flexible Box Flex

Box into elastic box

Display:flex;

Elastic box consists of an elastic container (Flex container) and an elastic element (Flex Item)

Flex Container

Flex Layout Diagram

Flex Six Properties

1.flex-direction

Determine the direction of the spindle

Flex-direction:row | Row-reverse | Column | Column-reverse;

Meaning of the four values:

Row (default): Spindle is horizontal, beginning at left Row-reverse: spindle is horizontal, beginning at right end column: Spindle for vertical direction, beginning at Upper Column-reverse: spindle for vertical direction, beginning at upper end

The respective effect corresponds to:

Row Row-reverse:

Column Column-reverse:

2.flex-wrap

By default, items are lined up on a single line (the axis). The Flex-wrap property defines how to wrap a line if it doesn't fit. Defined as follows:

Flex-wrap:nowrap|wrap|wrap-reverse;

NoWrap ( default): No wrap Wrap: Line wrap, first row above Wrap-reverse: Line break, the first line is below

Flex-flow

The Flex-flow property is shorthand for flex-direction and flex-wrap. The default value is: Row nowrap.

Justify-content

Defines how the item is aligned on the spindle (x-axis).

Justify-content:flex-start|flex-end|center|space-between|space-around;

Effect

Align-items

The Align-items property defines how the item is aligned on the intersection axis (Y-axis).

Align-items:flex-start|flex-end|center|baseline|stretch;

　　

Align-content

The Align-content attribute defines the alignment of multiple axes. If the item has only one axis, this property does not work. This property defines the alignment of the multiple axes on the Y axis, with its six property values:

Flex-start: Aligns with the starting 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: aligns with the intersection axis, and the interval between the axes is evenly distributed. 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.

　　

Flex Item

One of the requirements here is that when set to flex layout, the float, clear, and vertical-align properties of the child elements are invalidated.

Flex Six properties:

Orderflex-growflex-shrinkflex-basisflexalign-self

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. With this property, you can adjust the order in which the HTML appears.

order:<integer>;

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.

flex-grow:<number>;

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.

flex-shrink:<number>;

　　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.

Flex-basis

The Flex-basis property defines the spindle space (main size) that the item occupies before allocating the extra space. Similar to setting the Width property.

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.

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

　　

CSS3 Flexible Box Flex