Need help with my sizing and display of my flex items.
I have my flex items wrapped in a div called col. I put flex: 1; on the class but the boxes don't look to be the same size and the calculator box is pushed to the right leaving no space. I put a border around the col class to illustrate what I am talking about.
https://davesamuels1998.github.io/four-card-feature-section/
https://github.com/DaveSamuels1998/four-card-feature-section
GitHub
GitHub - DaveSamuels1998/four-card-feature-section
Contribute to DaveSamuels1998/four-card-feature-section development by creating an account on GitHub.
4 Replies
This is what the website is supposed to look like.
the box on the right is bigger due to the content. You'd have to limit the size of the children in the flex container so the content wraps rather than causes the container to grow. Since there's 3 "columns" i recommend giving them all a
flex-basis of 33.333% (33.333% x 3 = 99.999 which is virtually 100%), giving equal thirds. In terms of there being no space on the right, i'd recommend a wrapper element or giving .layout-grid a max-width and then centering it with margin-inline: auto;, as i said above, the ability for there to be space is being hindered due to the content expanding the container.
As a side note, there's nothing wrong with using flex however grid is an great way too as it makes it just that tinier bit easier and removes the need for an extra div too. Here's an example of how i would approach both methods (anyone else, feel free to correct me or mention improvements), hope this helps.
https://codepen.io/deerCabin/pen/QWXWZXxThank you, I used Figma to get the dimension I need at set the max-width. I orginally did that for the cards but I was trying to follow Kevin Powell solution and I was just getting a different result. It was driving me crazy. I guess I will just set a max-weight on things from now on and use margin-inline, thanks!
You’re welcome