Fun with flexbox

[valeoadmin]

Hello again,

I’m trying get justify-content: space-evenly; to apply to these boxes I’ve drawn a red line around (http://prntscr.com/nb6eji) on dev.valeonetworks.com

I’m not that proficient with flexbox and the 100 combinations of different syntaxes I tried haven’t worked yet. It’s using existing columns inside a row of x theme so maybe display: block; from the theme is messing with it?

My goal is just to get spaces on the right and left of the row the same width as the spaces between the columns.

Thanks!
Ryan

[nabeel]

Hi Ryan,

Thank you for reaching out to us. You should use justify-content: space-between; then give flex-basis to the child elements which specifies the initial size of the flex item. Try replacing your code with the following code instead:

.featuresbox {
    display: flex;
    justify-content: space-between;
}
.featuresbox > div {
    flex-basis: 20%;
    margin: 0 !important;
}

Here’s a great article that you can follow to learn more about Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Cheers!

[valeoadmin]

Thanks Nabeel, looks like the missing key was the margin: 0 !important;

After I added that I could play around with the flex boxes as normal. The article you posted was the one I was using to originally set this up actually. I even completed all the lessons on flexbox froggy to get more comfortable with this.

[Prasant]

Glad to hear that.