- This topic is empty.
February 14, 2019 at 5:11 am #282867
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.February 18, 2019 at 8:52 pm #283169
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.February 19, 2019 at 1:20 am #283176BeverleyhParticipant
Sounds like you want
flex-grow, with a value of
1applied to all list items except A and B where you’d use
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.February 19, 2019 at 4:00 am #283180LearnTheNewParticipantFebruary 19, 2019 at 6:02 am #283186BeverleyhParticipant
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.February 19, 2019 at 10:04 am #283204Paulie_DMember
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….February 21, 2019 at 6:03 pm #283396
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?February 22, 2019 at 4:44 am #283401Paulie_DMemberFebruary 22, 2019 at 1:41 pm #283453
Thank you for clarifying on both counts, Paulie_D ;)
- The forum ‘CSS’ is closed to new topics and replies.