DEV Community

Jérôme Pott
Jérôme Pott

Posted on

5

Flexbox space-evenly value

Using the space-evenly value with Flexbox

You have certainly already used the space-around and space-evenly values of the Flexbox properties justify-content and align-items.

But did you know that you have one extra option?

Meet thespace-evenly value. This "new" value is similar to space-around but provides equal instead of half-sized space on the edges.

space-around
space-around

space-evenly
space-evenly

Microsoft Edge

In Microsoft Edge, the space-evenly value is currently only supported in CSS grid. But here is a possible workaround with a fallback to the space-around value:

.space-evenly {
  justify-content: space-evenly;
}

@supports (-ms-accelerator: true) {
  /* Edge only */

  .space-evenly {
    justify-content: space-around;
    /* you can also add some other adjustments to size, margins etc to get the same positioning */
  }
}
Enter fullscreen mode Exit fullscreen mode

Sources:
https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/15947692/
https://caniuse.com/#search=space-evenly
https://cssreference.io/property/justify-content/

👋 One new thing before you go

Are you investing in your dev career? 😒

We have created a membership program that helps cap your costs so you can build and experiment for less. And we currently have early-bird pricing which makes it an even better value! 🐥

Just one of many great perks of being part of the network ❤️

Top comments (1)

Collapse
 
desoga profile image
deji adesoga • Edited

I think this Website contains almost, if not all the values of css flex box. It's also a practical way of viewing the features in real time.

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay