CSS3 Study notes: Flexbox layout

in this article we will Learn CSS The Flexbox layout of several of the most important concepts, by learning The Flexbox layout, you will find that all the previous encounters on the layout of the problem, now can 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

flexbox The two most important concepts of the layout are   container   ( blue child element   ( red Span style= "font-family: the song Body;" > In the example in this article,   container     child elements  < Span style= "font-family: the song Body;" > 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 are in Container of the add flex-direction:column in CSS. after the child elements the direction of the arrangement 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 let's move the child elements back to the horizontal layout, which requires changing the value of the Flex-direction property from column to row, The child element will return 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 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

It is recommended that you mix justify-content, align-items , and flex-direction several attributes together, See what kind of layout you will achieve. This way you can correctly understand the layout of the Flexbox layout.

3. child elements

Finally, we will learn to target child elements some of the CSS properties that deal with flexbox layouts .

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

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

Article Source: Webhek

CSS3 Study notes: Flexbox layout