Branding & Design Agency Logos | brandulum Custom Design Agency Logo Designs

Thursday January 21, 2021 By Dave

Flexbox Align: When to Use Auto Margins Instead of Flexbox Center

Flexbox alignment properties are excellent and so they clear up plenty of structure issues, particularly the place the widespread “vertical and horizontal middle” structure is required. Nevertheless, there are occasions when aligning with auto margins is safer and extra versatile. This tutorial will present you when!

Get Began with Flexbox

In case you’re simply entering into the world of flexbox we’ve got a sequence of complete newbie’s tutorials to get you on top of things. Study the fundamentals of flexbox alignment, flexbox ordering, and flexbox sizing, and also you’ll be completely geared up for extra intermediate tutorials afterward!

The Venture

For this demonstration, we’ll assume that we’re constructing a minimal weblog web site for a shopper. The designer supplied us the next web page structure:

When the menu toggle button is clicked, the fullscreen menu will seem and seem like this:

Take note of the next:

The header will likely be fastened and stay as we scroll.
The menu will likely be fullscreen and stuck. Its objects will likely be vertically and horizontally centered. Nevertheless, if their whole peak exceeds the menu peak, a scrollbar will seem.

1. Outline the HTML Markup

Let’s start by setting out the required markup:

<header class="page-header">
  <nav>
    <div class="page-header-inner">
      <a href="" class="brand">Model</a>
      <button kind="button" class="toggle-menu">MENU</button>
    </div>

    <div class="menu-wrapper">
      <ul>
        <li>
          <a href="">...</a>
        </li>
          
        <!-- extra listing objects right here -->
      </ul>
      
      <!-- helper buttons right here -->
    </div>
  </nav>
</header>

Throughout the nav ingredient, we’ll outline two helper buttons that may enable us so as to add or take away objects by clicking them. The minimal variety of objects will likely be three, however we are able to add and take away objects to make our demo clearer.

Helper buttons for adding or removing menu items

2. Specify Some CSS Types

Right here’s part of the kinds we’ll use:

/*CUSTOM VARIABLES HERE*/

.page-header,
.page-header .menu-wrapper {
  place: fastened;
  high: 0;
  left: 0;
  backside: 0;
  proper: 0;
}

.page-header .page-header-inner {
  show: flex;
  align-items: middle;
  justify-content: space-between;
  peak: 60px;
  padding: 0 20px;
  background: var(--beige);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.page-header .page-header-inner * {
  z-index: 1;
}

.page-header .menu-wrapper {
  show: none;
  align-items: middle;
  justify-content: middle;
  overflow-y: auto;
  background: var(--white);
}

By default, the .menu-wrapper ingredient will likely be hidden and obtain show: flex as quickly as we click on the toggle button.

Flexbox Heart

To reply a basic structure query, we’re going to make use of flexbox to middle the menu vertically and horizontally. Flexbox makes it very easy: to align the objects in the midst of the web page we’ll use justify-content: middle and align-items: middle.

Nevertheless, there’s an overflow drawback. If we add sufficient objects to make the scrollbar seem, we’ll discover that the highest ones are being reduce off—they disappear fully and we are able to’t attain them by scrolling.

Check the demo to see your self; add 20 or so objects to the menu:

The `protected` Key phrase

One technique to overcome this concern is to reap the benefits of a brand new CSS key phrase which we are able to use once we align objects: protected.

Right here’s its actual definition as taken from Mozilla Developer Network (MDN) Docs:

“Used alongside an alignment key phrase. If the chosen key phrase implies that the merchandise overflows the alignment container inflicting knowledge loss, the merchandise is as an alternative aligned as if the alignment mode have been begin.”

To check this new worth we’ll change align-items: middle with align-items: protected middle.

In plain English we might translate the protected middle values as observe:

“The weather will likely be vertically centered, but when their peak exceeds the flex container’s one, the alignment mode will change to begin. In fact, to see all of the objects, the flex container ought to have an applicable overflow-y worth like auto.”

Sadly, on the time of this writing, it isn’t thought of a steady answer. In precise truth, it has very limited browser support and solely works in current variations of Firefox.

Examine the next demo to see how the protected key phrase works (ensure to take action in Firefox):

Auto Margins

Fortunately, there’s one other protected answer that we are able to use: we’ll reap the benefits of auto margins. This isn’t truly a flexbox property, actually you’ve most likely already used it through the margin: 0 auto rule to middle a fixed-width ingredient inside a guardian container.

In our case, the trick is to take away the align-items: middle and justify-content: middle guidelines from the flex container and provides the flex merchandise margin: auto as an alternative.

By setting all margins to auto, all sides of our flex merchandise will attempt to occupy any accessible area. If this area exists, they’ll push it into the middle.

This solves our particular drawback as a result of auto margins gained’t reduce off components of the flex merchandise within the occasion it exceeds the dimensions of the container.

Word: remember that as quickly as you utilize this system, the flexbox alignment properties may have no impact.

Right here’s the associated demo:

3. Toggle Menu

Lastly, we’ll use some easy JavaScript code to toggle the menu:

const toggleMenu = doc.querySelector(".toggle-menu");
const pageHeader = doc.querySelector(".page-header");

toggleMenu.addEventListener("click on", operate () {
  pageHeader.classList.toggle("menu-opened");
  doc.physique.classList.toggle("overflow-y-hidden");
});

The corresponding kinds:

physique.overflow-y-hidden {
  overflow-y: hidden;
}

.page-header.menu-opened .page-header-inner {
  box-shadow: none;
}

.page-header.menu-opened .menu-wrapper {
  show: flex;
}

Conclusion

Accomplished! Immediately we mentioned the efficient use of auto margins for controlling the alignment of a flex structure. We lined only one particular case, however hopefully you get the thought and can be capable to apply it to your individual conditions.

Two issues you need to keep in mind:

Not like flexbox alignment properties, auto margins needs to be outlined within the flex merchandise.
Auto margins take priority over the flexbox alignment properties.

As at all times, thanks loads for studying!