CSS3 Flexbox easily enables horizontal and vertical center of elements, css3flexbox

CSS3 Flexbox easily enables horizontal and vertical center of elements, css3flexbox

CSS3 Flexbox easily enables horizontal and vertical center of Elements

There are a lot of tutorials on Flex on the Internet, and Flex is not called either. Some are called Flexbox and some are called Flex. In fact, there are no mistakes in these two methods, but Flexbox is a little old, however, Flex is just something that has just arrived. To facilitate illustration and catch up with the new technology, I will call this layout Flex layout.

 

Element center, I believe you will often use it as a front-end engineer. Whether in the horizontal direction or vertical direction, you can wander in your career. However, it is difficult to implement vertical center in many cases. But you don't have to worry about it. Let's share with you how to align elements horizontally and vertically using the Flex layout.

Horizontal Center

Horizontal center is the simplest. Let's look at the Code directly.

 

1. horizontal center of a single element

CSS 3 Flexbox easily implements horizontal and vertical center CSS CODE OF ELEMENTS

.box{    display: flex;    justify-content: center;    background: #0099cc}h1{    color: #FFF}

HTML code

<Div class = "box"> 
 
In this Code, we only need to add two attributes to the parent element of the h1 tag. The role of justify-content is to center the div box with the class as the box. The box is centered, and the elements in the box are naturally centered. The advantage is that you do not need to set any style for the element (h1) to be centered, if: width, margin.
 
2. Multiple h1 elements are horizontally centered
CSS3 Flexbox easily implements horizontal and vertical center HTML code of Elements
<Div class = "box"> CSS code
.box{    display: flex;    justify-content: center;    width: 100%;    background: #0099cc}h1{    font-size: 1rem;    padding: 1rem;    border: 1px dashed #FFF;    color: #FFF;    font-weight: normal;}
 
The code is still quite neat. In the Flex layout, the role object is child element and parent element, so here we may wish to use the body as a normal tag, although it is rarely used in this way, however, to demonstrate that the body tag is very grounded, this example uses the body tag as the parent element of the box.
 
Now let's analyze the Code. There are two things in Flex: one is the Flex container (parent element of the sub-project) and the other is the sub-project (child element of the Flex container ). If you do not add a style to the. box, an h1 label occupies one line, that is, the page displays the three lines of text "flex auto layout justify-content attribute achieves horizontal element center ". If we give. box added the display: flex; then the three h1 labels are properly arranged in a row, which is equivalent to floating, but it will not exceed. box width and line feed, it is always displayed in a row.
Vertical center of Elements
Vertical element center is sometimes troublesome during development, but after Flex layout is used, everything becomes simplified! Let's take a look at the example!
 
1. Vertical center of a single h1 label
CSS3 Flexbox easily implements horizontal and vertical center HTML code of Elements
<Div class = "box"> CSS code
.box{    display: flex;    width: 980px;    height: 30rem;    align-items:center;    background: #0099cc}h1{    font-size: 1rem;    padding: 1rem;    border: 1px dashed #FFF;    color: #FFF}
 
To make it clear, we define the high and blue background of. box and add a border to the h1 element. In this way, the h1 element is in the center, so you don't need to set the height for h1, and you don't need to set the absolute positioning. That's right, it's so simple and rude.
 
2. Multiple h1 labels are vertically centered side by side
CSS3 Flexbox easily implements horizontal and vertical center HTML code of Elements
<Div class = "box"> CSS code
.box{    display: flex;    width: 980px;    height: 30rem;    align-items:center;    background: #0099cc}h1{    font-size: 1rem;    padding: 1rem;    border: 1px dashed #FFF;    color: #FFF}
 
In the above example, apart from the HTML code, there are two more h1 labels, and the style remains unchanged. With Flex vertical center, the problem of element, image, and text center instantly becomes a bubble.
 
Note: The div and h1 labels are just examples. The Flex attribute is also applicable to other HTML tags.
To horizontally center the parent element, you only need to label the body with an attribute. The Code is as follows:
body{    display: flex;    justify-content: center;}
 
To show the effect, we set the width of. box to 960px and the background color to # 0099CC.
3. Multiple rows of h1 labels vertically centered
HTML code
<Div class = "box"> CSS code
.box{    display: flex;    width: 980px;    height: 30rem;    justify-content:center;    background: #0099cc;    flex-direction:column}h1{    display: flex;    justify-content:center;    font-size: 1rem;    padding: 1rem;    border: 1px dashed #FFF;    color: #FFF}
 
Because the display: flex; attribute is added to the elastic container. box, sub-projects are arranged horizontally by default. Therefore, a flex-direction: column attribute is added to the. box to vertically arrange sub-projects. In this case, the vertical direction is used as the main axis, so we can use a justify-content: center to center all sub-projects in the vertical direction. To align the text in the h1 label horizontally, we also gave h1 a dislay: flex; and justify-content: center. Because h1 is the default horizontal arrangement, so justify-content: center can center the text horizontally.
 
Here, we only need to pay attention to the justify-content: center usage. Its function is to define the alignment of the Flex project in the direction of the spindle. You can also learn more in this article "Detailed description of CSS3 Flex flexible layout usage.
 
Finally, let's take a complete example, including horizontal and vertical center. Let's take a look at the example.
CSS3 Flexbox easily implements horizontal and vertical center HTML code of Elements
<Div class = "box"> CSS code
body{display: flex;justify-content:center}.box{    display: flex;    width: 980px;    height: 30rem;    justify-content:center;    background: #0099cc;    flex-direction:column;    align-items:center;}h1{    display: flex;    justify-content:center;    font-size: 1rem;    padding: 1rem;    border: 1px dashed #FFF;    color: #FFF;    width: 28rem}
 
Code Analysis: to center the text in h1, we have added display: flex; and justify-content: center to h1. center vertically in the box. box also includes the display: flex; and justify-content: center attributes. In the. box, align-items: center places h1 horizontally. This attribute defines the alignment of the project on the cross axis. Since flex-direction: column; is used, the vertical direction is used as the spindle, And the cross axis is actually the horizontal direction. To align the. box horizontally, we also define the body {display: flex; justify-content: center}
PS: the actual effect of the Code may be different from that of the image display, because the pasted code is the simplest. To achieve the image demonstration effect, therefore, the code is slightly modified.
 
Original article: http://yunkus.com/article/css3/286.html