Flex layout for CSS3

The Flex layout container is a telescopic container, where the container itself will be set to its own size dynamically, and then when the Flex container is applied to a size (width and height), the elements in the container are automatically adjusted to fit the new size. Flex containers can also set scaling and fixed widths, and you can set the direction (landscape and portrait) of the elements in the container and whether to support the automatic wrapping of elements. With this artifact, the layout of the page can be much more convenient. Note that when set to flex layout, the float, clear, and vertical-align properties of the child elements are invalidated.

One: Container style description

Setup mode

Set a style for the container to open the flex layout of the container, at which point the elements in the container container are displayed in accordance with the criteria of the telescopic container, with no additional settings:

. container{
Display:flex; Display:-webkit-flex;
}

The default display is the horizontal arrangement, and does not wrap, such as (easy to see, the element adds the border style):

　　

Arrange direction and line breaks:

The flex-direction:column;/* is arranged from top to bottom, and the height of the child element is automatically stretched to fill the height of the entire container */

The flex-direction:column-reverse;/* is arranged from bottom to top, and the height of the child element is automatically stretched to fill the entire container's height */

flex-wrap:wrap;/* support line wrapping, when the total width of the element exceeds the width of the container, the line will be displayed */
/* These two styles can be written together */
Flex-flow:column wrap;/* vertical arrangement, and support line wrapping */

Alignment:

Justify-content:flex-start | Flex-end | Center | Space-between | The alignment of space-around;/* around */

• 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:flex-start | Flex-end | Center | Baseline | stretch;/* the top and bottom of the alignment */

• Flex-start: The start of the vertical axis is aligned.
• Flex-end: The end alignment of the vertical axis.
• Center: The midpoint alignment of the vertical 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:flex-start | Flex-end | Center | Space-between | Space-around | Stretch;/* is based on the vertical axis, the Align-content attribute defines the alignment of multiple axes. If the item has only one axis, this property does not work. */

• Flex-start: Aligns with the start of the vertical axis.
• Flex-end: Aligns with the end of the longitudinal axis.
• Center: Aligns with the midpoint of the longitudinal axis.
• Space-between: aligned with the longitudinal 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.

Two: Element style description

1. Order Style

To set the order in which elements are arranged:

. Item {  order: <integer>;}

　　

2. Flex-grow Style

Sets the magnification of the element, if 0 means no magnification. If all elements have a flex-grow of 1, the remaining size is equally divided (not the same size as the remaining size):

. Item {  Flex-grow: <number>;/* Default 0 */}

3. Flex-shrink Style

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.

. Item {  Flex-shrink: <number>;/* Default 1 */}

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.

4. Flex-basis Style

The Flex-basis property defines the size that the item occupies before allocating extra space (height is arranged vertically and width is arranged horizontally). 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.

. Item {  flex-basis: <length> | auto;/* Default auto */}

5. Flex Style

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.

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.

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

6. Align-self Style

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.

. item {  Align-self:auto | flex-start | flex-end | center | baseline | stretch;}

• Flex-start: The start of the vertical axis is aligned.
• Flex-end: The end alignment of the vertical axis.
• Center: The midpoint alignment of the vertical 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.

This property may take 6 values, except auto, and the other is exactly the same as the Align-items property.

This article is mainly referenced from: Http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

Flex layout for CSS3