CSS3 and flexible box layouts

1. Flexible box layout Alignment mode 1.1, Flexible box

The parent element must be a flexible box model, that is, set display to flex before wrapping the child elements in the specified flex box

The code is as follows:

<!        DOCTYPE html>{width:800px;Height:410px;Display:Flex;/*Set as elastic box model*/Border:1px solid Red;margin:0 Auto; }. Div1 a{text-decoration:None;Display:Inline-block;Flex:Auto;/*child elements Distribute parent element width and height evenly*/margin:5px;Background-color:#757575; }</style> 

Results:

1.2, flexible box display flex-wrap:wrap, flexible container for more than a row. In this case, the part of the Flex child overflow is placed on a new line, and a row breaks inside the child.

<!        DOCTYPE html>{width:800px;Height:410px;Display:Flex;/*Set as elastic box model*/Flex-wrap:Wrap;/*Specify the contents of the flexible box to wrap the display*/Border:1px solid Red;margin:0 Auto; }. Div1 a{text-decoration:None;Display:Inline-block;width:150px;Height:200px;Border:1px solid Red;Background-color:#757575; }</style> 

Results:

From the above results, although the child element wrapping shows, but the layout effect is not very good, okay, don't worry, we'll look down.

1.3, Elastic box justified CSS syntax: justify-content:flex-start|flex-end|center|space-between|space-around|initial|inherit;

Property value:
Flex-start the default value. The item is at the beginning of the container.
The Flex-end item is at the end of the container.
The center project is located in the hub of the container.
The Space-between item is located in a container with blank spaces between the rows.
Space-around items are placed in a blank container before, between, and after each row.
Initial sets the property to its default value.
Inherit inherits this property from the parent element.

justify-content Property values have a lot of, this time for you to introduce is Space-between is also in our layout more useful in the layout, the disadvantage is that compatibility is not ideal

No more nonsense, give us a try.

<!        DOCTYPE html>{width:800px;Height:410px;Display:Flex;/*Set as elastic box model*/Flex-wrap:Wrap;/*Specify the contents of the flexible box to wrap the display*/justify-content:Space-between;/*regulation of elastic box justify*/Border:1px solid Red;margin:0 Auto; }. Div1 a{text-decoration:None;Display:Inline-block;width:150px;Height:200px;Background-color:#757575; }</style> 

Results:

Although the effect is very good, but the careful children's shoes are not difficult to find our child element is not aligned with the bottom of the parent element

1.4, Elastic box cross-axis alignment

CSS syntax align-content: Stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Stretch the default value. The elements are stretched to fit the container. The rows will stretch to occupy the remaining space. If the remaining space is a negative number, the value is equivalent to ' Flex-start '. In other cases, the remaining space is divided by all rows to enlarge their side axis dimensions.

The center element is centered in the container. The rows are stacked to the middle position of the elastic box container. Each row 22 is close to live at the same time in the Elastic Box Container center alignment, keep the elastic box container side axis start content boundary and the distance between the first row and the side of the container end of the content boundary and the last row of the same distance. (If the remaining space is negative, the rows are equal distances that overflow in two directions.) ）

The Flex-start element is at the beginning of the container. Each row is stacked to the starting position of the elastic box container. The start boundary of the side axis of the first row in the Elastic box container is close to the start boundary of the side axis of the elastic box container, and each row immediately follows the front row.

The Flex-end element is at the end of the container. The rows are stacked to the end position of the elastic box container. The end boundary of the side axis of the last line in the Elastic box container is close to the end of the side axis of the elastic box container, and each row immediately follows the previous row.

The Space-between element is inside a container that leaves a blank space between the rows. The rows are evenly distributed in the elastic box container. If the remaining space is negative or there is only one row in the Elastic box container, the value is equivalent to ' Flex-start '. In other cases, the start boundary of the side axis of the first row is close to the boundary of the start of the side axis of the elastic box container, the end boundary of the side axis of the last line is close to the end boundary of the side axis of the elastic box container, and the remaining rows are arranged in a flexible box window to maintain equal space between 22.

The Space-around element is placed in a blank container before, between, and after each row. The rows are evenly distributed in the elastic box container, leaving half of the space between the child elements and the child elements. If the remaining space is negative or there is only one row in the Elastic box container, the value is equivalent to ' center '. In other cases, the rows are arranged in a flexible box container in a certain way to maintain equal space between 22, while the space behind the first line and the last line is half the rest of the space.

There are many property values, this time introduce Space-between

<!        DOCTYPE html>{width:800px;Height:410px;Display:Flex;/*Set as elastic box model*/Flex-wrap:Wrap;/*Specify the contents of the flexible box to wrap the display*/justify-content:Space-between;/*regulation of elastic box justify*/align-content:Space-between;/*when the content of the elastic box is multi-line display is the specified cross-axis alignment*/Border:1px solid Red;margin:0 Auto; }. Div1 a{text-decoration:None;Display:Inline-block;width:150px;Height:200px;Background-color:#757575; }</style> 

Results:

Very quickly completed a very perfect layout, is not it.

Summary: This layout is not separated from the standard document flow, so there is no need to clear the floating problem

CSS3 and flexible box layouts