CSS3 Flex Notes Finishing

Flex is the abbreviation for flexible box, meaning "resilient layout", which provides maximum flexibility for box-shaped models.

elements that use flex layouts , 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.

First, the container's properties

Flex-direction

Flex-direction:row | Row-reverse | Column | Column-reverse;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

Flex-wrap:nowrap | Wrap | Wrap-reverse;nowrap (default): No Line break. Wrap: Wrap, the first line is above. Wrap-reverse: Line break, the first line is below

　　

Justify-content

Justify-content:flex-start | Flex-end | Center | Space-between | Space-around;flex-start (default): Left-justified flex-end: right-aligned center: centered 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

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 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

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): The axis fills the entire cross axis.

　　

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>;

　　

Ii. Properties of the project

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>;

　　

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>;

　　

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>;

　　

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.

Flex-basis: <length> | Auto

　　

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 ' >]

　　

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

　　

Reference:

Http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

CSS3 Flex Notes Finishing