Explore the magic of automatic Margins in flex context

To get to the point of this article, what’s the fastest way to center an element horizontally and vertically?

Horizontal and vertical centering is also one of the most common problems in THE CSS field. Different scenarios have different methods, each with its own advantages and disadvantages. Well, the following is probably the easiest:

<div class="g-container">
    <div class="g-box"></div>
</div>
Copy the code

.g-container {
    display: flex;
}

.g-box {
    margin: auto;
}
Copy the code

The above display: flex replace display: inline – flex | grid | inline – grid is also possible.

CodePen Demo — Use Margin Auto to center elements horizontally and vertically

How to make`margin: auto`A vertically centered element

Well. How to make margin: Auto work in vertical direction?

In other words, with the traditional display: block container, why does margin: Auto center horizontally but not vertically?

Normally we would use this code:

div {
    width: 200px;
    height: 200px;
    margin: 0 auto;
}
Copy the code

Center the element horizontally with respect to its parent. But if we want to center the element vertically relative to its parent, margin: Auto 0 won’t work.

`display: block` 下 `margin: auto`The reason why the vertical orientation cannot center the element

To view the CSS document, run the display: block command:

If both margin-left and margin-right are auto, their used values are equal, causing horizontal centring.

— CSS2 Visual Formatting Model Details: 10.3.3

If margin-top, or margin-bottom are auto, their used value is 0.

– CSS2 Visual Formatting Model Details: 10.6.3

In display: block, if margin-left and margin-right are both auto, their expressions are equal, resulting in horizontal center of the element. (The calculated value here is half of the remaining free space of the element)

If margin-top and margin-bottom are both auto, then they both have a value of 0, and of course they cannot be vertically centered.

Use the FFC/GFC`margin: auto`A vertically centered element

OK, here we want to make the single element use margin: Auto can center an element vertically, which needs to be positioned in flex Formatting Context FFC or Grid Formatting Context GFC:

{
    display: flex;
    display: inline-flex;
    display: grid;
    display: inline-grid;
}
Copy the code

Under the FFC`margin: auto`Vertical orientation can center elements

Leaving grid layout aside for the moment, flex layout is probably more of a requirement in our business, and I’ll focus on some of the performance of automatic margin in flex context.

Well, there are also a lot of front ends nicknamed Flex engineers who flex everything.

Dispaly: Flex to view CSS documentation for the following reasons:

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

CSS Flexible Box Layout Module Level 1 — 8.1. Aligning with auto margins

In the flex formatting context, the margin: auto element is set so that any free space is allocated to automatic margin in that direction before being justified by justice-content and align-self

Here, it is very important that margin Auto not only takes effect in the horizontal direction, but also automatically allocates the remaining space in the vertical direction.

Implement flex layout with automatic margin`space-between | space-around`

Understand the core of the above sentence:

Through thejustify-content 和 align-selfBefore alignment, any free space is allocated to the automatic margin in that dimension

After that, we can implement space-between and space-around in flex layout using automatic Margin emulation.

Automatic margin implementation`space-around`

For a Flex layout like this:

<ul class="g-flex">
    <li>liA</li>
    <li>liB</li>
    <li>liC</li>
    <li>liD</li>
    <li>liE</li>
</ul>
Copy the code

If its CSS code is:

.g-flex {
    display: flex;
    justify-content: space-around;
}

li { ... }
Copy the code

The effect is as follows:

The following CSS code is exactly the same as the above:

.g-flex {
    display: flex;
    // justify-content: space-around;
}

li { 
    margin: auto;
}
Copy the code

CodePen Demo — Margin Auto implements space-around in Flex

Automatic margin implementation`space-between`

In the same way, using automatic margin, it is also easy to implement space-between in Flex.

.g-flex { display: flex; justify-content: space-between; } li {... }Copy the code

.g-flex {
    display: flex;
    // justify-content: space-between;
}

li {
    margin: auto;
}

li:first-child {
    margin-left: 0;
}

li:last-child {
    margin-right: 0;
}
Copy the code

CodePen Demo — Margin Auto implements space-between in Flex

Of course, it’s important to note that:

Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.

CSS Flexible Box Layout Module Level 1 — 8.1. Aligning with auto margins

This means that if the available space in any direction is allocated to an automatic margin in that direction, the alignment attribute (context-content /align-self) has no effect in that dimension, because the margin will steal all the available space left in that latitude direction after alignment.

Flex subprojects that use automatic margins have their parent-content set to their align-self no longer in effect, so there is a priority relationship.

Implement flex with automatic margin`align-self: flex-start | flex-end | center`

Automatic margin can achieve horizontal control, also can achieve vertical control, the principle is the same.

With margin: auto align – self under the simulated flex: the flex – start | flex – end | center, can look at the following Demo:

CodePen Demo — Margin Auto implements align-self: center in Flex
CodePen Demo — Margin Auto implements align-self: flex-end in Flex

Automatic margins in different directions

OK, after watching a large section of matting above, I probably have a preliminary understanding of the magic of automatic margin under FFC.

Both multi-directional and single-directional automatic margins are very useful.

Here are some interesting examples:

use`margin-left: auto`Achieve irregular alignment at both ends of the layout

Suppose we need to have the following layout:

The DOM structure is as follows:

<ul class="g-nav">
    <li>A navigation</li>
    <li>Navigation B</li>
    <li>Navigation C</li>
    <li>Navigation D</li>
    <li class="g-login">landing</li>
</ul>

Copy the code

Using margin-left: auto for the last element makes this layout easy:

.g-nav {
    display: flex;
}

.g-login {
    margin-left: auto;
}
Copy the code

In this case, the computed value of auto is the space left after the horizontal container has arranged all the Li’s.

Of course, it does not have to be applied to the first or last element, such as this layout, is exactly the same implementation:

<ul class="g-nav">
    <li>A navigation</li>
    <li>Navigation B</li>
    <li>Navigation C</li>
    <li>Navigation D</li>
    <li class="g-login">landing</li>
    <li>registered</li>
</ul>
Copy the code

.g-nav {
    display: flex;
}

.g-login {
    margin-left: auto;
}
Copy the code

Codepen Demo — nav list by margin left auto

The vertical rows are centered

OK, or, more often than not, we have a requirement that a piece of a large complex layout is not fixed in height or width and needs to be centered relative to the rest of the space it is in:

Here are 5 lines of text, and we need the third and fourth lines to be vertically centered relative to the remaining space.

Simple align-self or align-items don’t seem to solve the problem quickly if you use flex layout here.

To use automatic margin, we only need to make margin-top: auto on the first element and margin-bottom: auto on the last element. Look at the code:

<div class="g-container">
    <p>This is the first line</p>
    <p>This is the second line</p>
    <p class="s-thirf">1, the remaining multi-line text case needs to be vertically centered the remaining space</p>
    <p class="s-forth">2, the remaining multi-line case needs to be vertically centered the remaining space</p>
    <p>This is the last line</p>
</div>
Copy the code

.g-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.s-thirf {
    margin-top: auto;
}

.s-forth {
    margin-bottom: auto;
}
Copy the code

Margin: Auto 0 for any element that needs to be centered vertically.

Well, very handy and easy to use: CodePen Demo — Auto Margin quickly center any paragraph vertically

use`margin-top: auto`Implement sticky footer layout

OK, one last example.

Requirements: A page has a footer section. If the content of the entire page is smaller than the height of the window, the footer is fixed at the bottom of the window. If the content of the entire page is larger than the height of the window, the footer flows normally (i.e. you need to scroll to the bottom to see the footer). It’s a sticky layout.

Look at the results:

Well, this requirement can be easily addressed in Flex using precision-content: space-between, as well as margin-top: auto:

<div class="g-container">
    <div class="g-real-box">.</div>
    <div class="g-footer"></div>
</div>
Copy the code

.g-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.g-footer {
    margin-top: auto;
    flex-shrink: 0;
    height: 30px;
    background: deeppink;
}
Copy the code

Codepen Demo — sticky footer by flex margin auto

The above example is intended to introduce more automatic margin usage scenarios. Of course, it is possible to do this without using flex layout. Here is another way to do it without flex layout:

CodePen Demo — sticky footer by margin/paddig

Points worth noting

Automatic margin is very useful and can be used in a variety of scenarios. Some of the points mentioned above need to be emphasized:

Margin-top and margin-bottom values in the block formatting context are 0 if they are auto
In flex formatting context, any space that is free is allocated to an automatic margin in that direction before being aligned with sequence-content and align-self
Automatic margins in a single direction are also useful, calculating the amount of space left in that direction
Flex subprojects that use automatic margins will no longer have their context-content set by their parent element and their own align-self

The last

More interesting CSS technology articles are summarized in my Github — iCSS, constantly updated, welcome to click on the star subscription favorites.

Well, the end of this article, I hope to help you 🙂

If there are any questions or suggestions, you can exchange more original articles, writing is limited, talent and learning is shallow, if there is something wrong in the article, hope to inform.

Finally, the new public account for attention, the form of hope is shorter, higher quality skills, including but not limited to CSS:

Explore the magic of automatic Margins in flex context

How to makemargin: autoA vertically centered element

display: block 下 margin: autoThe reason why the vertical orientation cannot center the element

Use the FFC/GFCmargin: autoA vertically centered element

Under the FFCmargin: autoVertical orientation can center elements

Implement flex layout with automatic marginspace-between | space-around

Automatic margin implementationspace-around

Automatic margin implementationspace-between

Implement flex with automatic marginalign-self: flex-start | flex-end | center