There are many tutorials on the internet for Flex, and there are also some calls for Flexbox, some called flex, in fact, these two names are not wrong, just flexbox old point, and Flex is just out of the things, in order to facilitate the explanation, catch up with new technology, I'm going to call this layout a flex layout.
Element Center, I believe that as a front-end engineer You will always use, whether in the horizontal direction, or vertically centered, can be in your career wandering. But a lot of the time to achieve vertical centering, or more troublesome. But you don't have to worry about it, so let's share it. It is easy to achieve the center effect of elements in horizontal and vertical direction through flex layout. Center Horizontally
Horizontal centering is the simplest we'll look directly at the code.
1. Horizontal centering of individual elements
CSS3 Flexbox easily implements elements of the horizontal center and vertically centered CSS code View Source
| 3 |
Justify-content:center; |
HTML codeView Source
In this code, we just need to add two attributes to the parent element of the H1 tag, and the Justify-content function is to center the class for box's div box. The box is centered, the elements inside the box are centered naturally, and the advantage is that you don't need to set any style on the element that needs to be centered (H1), if: Width,margin.
2. Multiple H1 elements are centered horizontally
CSS3 Flexbox easily implements the horizontal center of elements and vertically centers HTML code View Source
CSS CodeView Source
| 03 |
Justify-content:center; |
| 10 |
BORDER:1PX dashed#fff; |
The code is quite neat, in the flex layout, the object is the child element and the parent element, so here we might as well as the body as a normal label use, although rarely used, but in order to explain the body tag is also very grounded gas, So in this case, the body tag is used as the parent element of box.
Now let's analyze the code, there are two things in Flex, one is the Flex container (the subproject parent element), and the other is a subproject (the Flex container child element). If you do not add a style to the. box, a H1 tag takes up one line, which means that the page will display three lines of text "Flex elastic layout justify-content attribute element is horizontally centered". If we add display:flex to. box, then the three H1 labels are properly lined up in a row, which is equivalent to floating, except that he will not be wrapped in a line that is more than the width of the. box. element is centered vertically
The vertical center of the element is sometimes troublesome in the beginning development, but it is simple to use the flex layout. Let's take a look at the example.
1. Single H1 label vertically centered
CSS3 Flexbox easily implements the horizontal center of elements and vertically centers HTML code View Source
CSS CodeView Source
| 11 |
BORDER:1PX dashed#fff; |
In order for everyone to see clearly, define the high, blue background of the. box; Add a border to the H1 element. In this way, the H1 element is obediently centered, do not have to set the height of H1, no absolute positioning, yes, it is so simple and rude.
2. Multiple H1 labels are centered vertically
CSS3 Flexbox easily implements the horizontal center of elements and vertically centers HTML code View Source
CSS CodeView Source
| 11 |
BORDER:1PX dashed#fff; |
The above example has more than two H1 tags on the HTML code, and the style has not changed. With flex vertically centered, the element, picture, text center problem instantly vanished.
Note: The DIV,H1 tag is just an example, and the Flex attribute also applies to other tag HTML tags.
If you want the parent element to be centered horizontally, you just need to give the body a property to be OK. The code looks like this: view source
| 3 |
Justify-content:center; |
In order to see the effect, here we set the width of the. box to 960px and the background color to #0099cc.
3. Multiline H1 label vertically centered HTML code View Source
