Flexbox layout in CSS3 CSS3 how to layout in Flexbox

We will only focus on a few core concepts, and after these core knowledge mastered, you can slowly learn those unimportant relevant knowledge.

1. Elements in containers and containers

The two most important concepts of the Flexbox layout are the container (blue) and the child elements in the container (red). In the example of this article, the container and its child elements are div.

Landscape layout

To achieve flex layout, we need to add the following code to the container's CSS:

. container {
Display:flex;
}

The effect is as follows:

We don't need to do anything about the child elements inside the container. They are automatically lined up by the horizontal axis.

Portrait layout

In the above demo, the default arrangement is along the horizontal axis, and One Direction is the ordinate, the concept of this axis is very important in understanding the flex layout.

When we add flex-direction:column to the container's CSS, the direction of the child element is changed.

. container {
Display:flex;
Flex-direction:column;
}

Now, the child elements are arranged in the direction of the ordinate.

2. Adjust the alignment of child elements

Now we're going to rearrange the child elements, which requires changing the value of the Flex-direction property from column to row and the child elements back to the landscape layout.

To adjust the alignment of child elements, I need to use both the Justify-content and Align-items properties, which control the orientation and alignment of child elements both horizontally and vertically.

Now we're going to use the Justify-content property to align all the child elements in the center:

. container {
Display:flex;
Flex-direction:row;
Justify-content:center;
}

Use the Align-items property to control the vertical alignment of child elements:

. container {
Display:flex;
Flex-direction:row;
Justify-content:center;
Align-items:center;
}

The following list shows the property values that can be used by the Justify-content and Align-items properties:

Justify-content:

• Flex-start (default)
• Flex-end
• Center
• Space-between
• Space-around

Align-items:

• Flex-start (default)
• Flex-end
• Center
• Baseline
• Stretch

We suggest that you will justify-content, Align-items and flex-direction several properties of mixed use, with each other, to see what kind of layout effect will be achieved. This way you can correctly understand the layout of the Flexbox layout.

3. Child elements

Finally, we'll learn some CSS properties for child elements that should be flexbox layout.

For example, we want to adjust the position of the first child element, we can add a CSS attribute to him align-self, the attribute value of this property is the same as Align-items:

. item1 {
Align-self:flex-end;
}

The effect is the following:

is not very magical and simple!

The knowledge about Flexbox layout is much richer than the one presented in this article, this is the important knowledge point is these, mastered them, and then learn some other usage is much easier.