The flex layout of CSS Layouts

Flex layouts Make it easy, complete, and responsive to implement a variety of page layouts.

Browser support: Get support from all browsers. (Note: Flex layout will be the preferred solution for future layouts)

I. The concept of flex layout FlexIs Flexible BoxThe abbreviation, meaning " Flexible Layout"To provide maximum flexibility for the box-shaped model. Any container can be specified as a flex layout. Defined:

1 Div{2 Display:Flex;3}4 5 /*in-line elements*/6 Div{7 Display:Inline-flex;8}9 Ten /*Browser for-webkit-kernel*/ One Div{ A Display:-webkit-flex; - Display:Flex; -}

Note: (When set to Flex layout, the float,clear , and vertical-align properties of the child elements will be invalidated)

Two. Layout structure

Elements that use flex layouts , called Flexcontainer, are referred to as "containers." All of its child elements automatically become container members, known as Flex items (FlexItem), or "project" for short.

The container has two axes by default: the horizontal spindle (main axis) and the vertical intersection axis (cross axis).

The starting position of the spindle (the intersection with the border) is called main start, and the end position is called main end;

The starting position of the intersection is called Cross start, and the end position is called crossing end.

Three. Container Properties

There are 6 properties on a container

• Flex-direction

• Flex-wrap

• Flex-flow

• Justify-content

• Align-items

• Align-content

1.flex-direction

Function: Determines the direction of the main axis (i.e. the arrangement of the project)

{      flex-direction: row | row-reverse | column | Column-reverse;}

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

As shown in the following:

2.flex-wrap

Function: When an axis line does not fit the project, specify how the item wraps.

. Box {    flex-wrap: nowrap | wrap | wrap-reverse;}

As shown in the following:

3.flex-flow

Function: Shorthand form ofFlex-direciton and flex-wrap

{    flex-flow: <flex-direction> | | <flex-wrap>;}

4.justify-content

Function: Define the alignment of the project on the spindle

{    justify-content: flex-start | flex-end | center | space-between | space-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.

It may take 5 values, and the exact alignment is related to the direction of the axis.

As the effect:

5.align-items

Function: Define the alignment of the item on the intersection axis

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

As the effect:

6.align-content

Function: Defines the alignment of multiple axes. (This property has no effect if the item has only one axis.) ）

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

As shown in the following:

Four. Properties of the project

1.order2.flex-grow3.flex-shrink4.flex-basis5.flex6.align-self

1.order Action: Defines the order in which items are arranged. The smaller the number, the higher the alignment, and the default is 0, which can be negative.

{    order: <integer>;}

2.flex-grow

Role: Defines the magnification of the project, which defaults to 0. (That is, even if there is space left, do not enlarge)

{     flex-grow: <number>/** }

Note: 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.

3.flex-shrink

Effect: The attribute defines the scaling of the item, which defaults to 1. (That is, if there is not enough space, the project will shrink)

{    flex-shrink: <number>/** }
Note: 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.
* Negative values are not valid for this property

4.flex-basis

Role: Defines the spindle space (main size) that the item occupies before allocating 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/** /}
Note: 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.

5.flex

Function: Shorthand for Flex-grow, Flex-shrink, and flex-basis, default value is 0 1 auto. The latter two properties are optional.

{     flex:}

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

Action: 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;}

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

The flex layout of CSS Layouts