Playing with Flexbox, aligning list items

[drone4four]

Howdy!

I am playing around with Flexbox. I am using Chris’ complete guide here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Wrestling with the properties and values of the flexbox container elements for the better part of the last hour, I’ve done my best to adjust everything to suit the needs of my project.

Check out my test case right now: https://codepen.io/Angeles4four/pen/aXaqqP

The first flexbox row (the tomato colored one) is where I want it. My question is, for the second flexbox row (the purple one), how do I extend the size of the first container (the one marked A) to extend and match the full width of the above containers (1 and 2)?

Then I’d like to have the second purple container (B) to match the width and align below the orange items (3 and 4).

Finally, the purple item C should just align right below orange item 5.

How do I achieve this effect? I’m at a loss here.

[drone4four]

I didn’t do the best job describing what I want to achieve. Here is a better explanation: How do I align “A” below “1 and 2” and align “B” below “3 and 4” as depicted in this mockup? https://i.imgur.com/DxHg6rw.jpg

Here is the Pen I am working with again: https://codepen.io/Angeles4four/pen/aXaqqP

Thanks for your attention.

[Beverleyh]

Sounds like you want flex-grow, with a value of 1 applied to all list items except A and B where you’d use 2.

Also look into calc() to add 2x 15% widths and 4x 6px margins together on A and B in order to match properties affecting horizontal calculations between the 1st and 2nd row.

[LearnTheNew]

Hi,remaove width sizes in both flex-item1 and flex-item2 and replace them with using rows and columns
https://imgur.com/gallery/DFmDwiC check link i have tryed.

@LearnTheNew

[Beverleyh]

No, that doesn’t line up like drone4four’s picture. This is the way I was thinking https://codepen.io/anon/pen/yZZqYV I’m on mobile but it should work.

[Paulie_D]

Frankly, this is not something Flexbo is suited for “out of the box”.

It has no method of aligning items between rows without set/defined margins.

It is however, something that CSS-Grid is ideal for….

https://codepen.io/Paulie-D/pen/VgRjRO

[drone4four]

Thank you @Beverleyh: Your Pen accomplishes what I set out to achieve.

Thank you @Paulie_D: You are right that CSS Grid is ideal for this situation. I’ll use your grid code for my project. With my prior novice experience I conflated flexbox and grid. The distinction is clear now.

One last thing, Paulie_D: In your Pen, the distance between the boundary of the browser window and box 1 is longer than the distance between the boundary of the browser window and box 5. How would you make these gaps equal on either side of the flex-container element of the HTML? I tried adding margin: 0 auto; to the CSS block for this element but this does not center align flex-container. What would you recommend to fix this?

By the way Paulie_D: How do you get CodePen to integrate like the way you do? Rather than sharing an https:// hyperlink, forum members can play with the Pen on the forum. How do you do this?

[Paulie_D]

Regardding the gaps I suspect this is due to a missing CSS reset

https://codepen.io/Paulie-D/pen/aXgVVZ

As for Codepen embedding, I just paste the link on a separate line and the pen just appears.

So this doesn’t embed: https://codepen.io/Paulie-D/pen/aXgVVZ but the link above does.

[drone4four]

Thank you for clarifying on both counts, Paulie_D ;)

[Author]

Posts