Three minutes to learn the Flexbox layout in CSS3

Original address, protection of copyright, please do not reprint: http://page.factj.com/blog/p/2574

In this article we will learn some of the most important concepts of flexbox layout in CSS, by learning the Flexbox layout, you will find that all the questions about the layout that you have encountered in the past can now be easily solved.

We will focus on only a few core concepts, and when these core knowledge is mastered, you will be able to learn more about unimportant 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 in this article, both the container and its child elements are div .

Landscape layout

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

. container {    Display:flex;}

The effect is as follows:

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

Portrait layout

In the above demonstration, 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 CSS in the container , the direction of the child elements will change.

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

Now, the direction of the child Elements is aligned along the ordinate direction.

2. Adjust the alignment of child elements

Now we have the child elements re-layout, which requires changing the value of the flex-direction property from column to Row, and the child elements going 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 positioning and alignment of child elements in both landscape and portrait orientation.

Below we will use the justify-content property to align all 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 the justify-content and align-items properties can use:

Justify-content:

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

Align-items:

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

We recommend that you mix justify-content , align-items , and flex-direction several attributes together to see what the layout will look like. This way you can correctly understand the layout of the Flexbox layout.

3. Child elements

Finally, we'll learn some of the CSS properties that address the Flexbox layout for child elements .

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

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

The effect is as follows:

Isn't it magical and simple!

The knowledge about the layout of Flexbox is far more abundant than this article introduces, this is a few of the important points of knowledge is these, mastered them, and then learn some other usage is much easier.

Three minutes to learn the Flexbox layout in CSS3