Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

james gonzalez
james gonzalez
1,734 Points
Posted by james gonzalez
james gonzalez
1,734 Points

Flexbox padding equally around multiple boxes.

I am trying to get padding 5% equally around a container.

What is happening is when 2 items are side by side you will see 10% padding because the two 5%'s are side by side. I would like to learn if this is something I can do without using to much smoke.

First post. Would love some help.

alt text

2 Answers

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

Maybe just do padding-left and padding-top for all containers, and then for the last container, also include a padding right?

james gonzalez
james gonzalez
1,734 Points
james gonzalez
james gonzalez
1,734 Points

I thought of the that as well but what if there is 4,8,12 or more and that grid wraps every 2 boxes? I think that would work If I always knew how many boxes will go into this container.

Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

What if you try adding padding to the left and right of the parent container, and then do justify-content: space-between? That way the child containers will wrap accordingly without asymmetric padding.