Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,007 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

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,007 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.