Firefox 52 to Introduce New Box-Alignment Values

CSS Grid is coming in Firefox 52 in March. That’s amazing. It could overshadow a few small improvements that are also coming in the release. The Box-Alignment module is getting a couple new features, as well.

Space items evenly instead of around!

First, we have a new value we can use in justify-content and align-items: space-evenly.

In the past, we’ve had space-around. This allows the extra whitespace generated by flex/grid to be placed to the left and right of the children. This is useful, but the exterior whitespace is half the value of the internal whitespace. Often not ideal.

Space-Around's less-than-ideal layout

Space-evenly takes the extra whitespace and splits it up … well … evenly.

.container {
    display:flex;
    width: 600px;
    margin: 50px auto;
    background-color: #042A2B;
    justify-content: space-even;
}

With this value, you no longer need to account for half the spacing as padding on the parent. The Box-Alignment properties can now handle all spacing needs.

Space-Evenly's fix

I’ve written a CodePen if you want to play with this value. Remember, it can only be accessed in the Firefox 52 Beta currently.

Baseline first and last

Align-items has always had baseline as a value. This aligns the baseline of the first line of text to the first line of text of its sibling boxes. This is great for some use cases and pairs nicely as a counterpoint to align-items: flex-start. 

Where’s the counterpoint to flex-end, though?

Firefox 52 implements align-items: first/last baseline allowing you to choose.

.container {
    align-items: last baseline;
}

Baseline last in action

See the entire list of new features here. There’s also some new interesting clip-path and animation features included. Of course, there’s also CSS Grid!

You May Also Enjoy

Top 3 uses for the ::before and ::after CSS pseudo elements

It’s no secret that I'm a fan of ::before and ::after pseudo-elements. I use them to great effect for creating darkened overlays in this previous post. They have so many uses beyond that, though. Here are my top 3 uses for them in my every-day development process.

How To: Use CSS Grid to Mix and Match Design Patterns

In a previous tutorial, I described how to create a simple fluid card grid with CSS Grid. In this tutorial, we'll take it a step farther and create promotional spaces that morph in interesting ways.

How To: Use CSS :after pseudo-elements to create simple overlays

Use :after elements to create the simplest HTML possible to render useful and fun overlays on top of background images. Then extend them with blend-modes!

My Side Projects

Web Workers Logo Web Workers Logo Web Workers Logo Web Workers Logo