Flex box
I'm using two
<select></select> inputs in my form. Normal on bigger screens I want them to be 50 50 with gap in between. And than wrap to if there is no space with the width of 100%.I'm using flex-box on them. I've tried using min-width:50%; on both <selection></selection>.
Problem:
-main one is due to using 50% i can not add gap.
-after wrapping they still don't get width:100%; (picture is included)
What do you think I'm doing wrong and could be a better solution.
Codepen:
https://codepen.io/Arslan-Akbar/pen/BaqKzyw
This is what I did in css.
.two_selectors{
display:flex;
flex-wrap:wrap;
}
.selector_wrapper{
min-width:50%;
}
7 Replies
Please use code snippets and proper code blocks instead of screen shots. Also, if you can, make a codepen to show the problems you're having.
Be sure to read #How To Ask Good Questions for more pro tips!
I'm sorry about that.
@dogic what you need to do for this is;
1. Set the minimum width to a size you feel is right for the smallest they should appear
Depending on what sort of content is is, this will be different. Text and images may be better suited to larger sizes.
Play around with the value until you're happy with the smallest width it get's to side-by-side and the largest width vertically.
2. Set
flex-grow: 1 on the flex children
This tells the browser "if these could be bigger than their minimum width, then make them both grow evenly". This achieves that 50/50 split you wanted.
Try setting this to 0 (or just comment out the rule entirely) to see the effect this has.
3. (optional) Set a gap on the flex container
Sometimes you don't want a gap between your flex children, sometimes you do. In this case, I would say you probably do.
I would recommend viewing in a larger screen size and adjusting the gap size until you're satisfied with how it looks side-by-side, then going to a smaller screen size and checking that it still looks okay vertically.
Here's the CSS I used on your CodePen to work this out. The values I've used are just ballpark figures and aren't special in any way. Use the techniques above to figure out what works best for the design you're going for.
Thank You for that. Actually it working as I expect with or without the
min-width. The min-width seems to do nothing.The
min-width is telling the browser to use a different minimum width to the one it uses by default.
Turn off the flex-grow by commenting it out and then try changing and removing the min-width to see what happens.
Effectively, the min-width here is acting a bit like a media query;
when the available space is smaller that 2 * min-width + gap (2x because we have 2 elements), then the elements go vertical, otherwise they go side-by-side.
A larger min-width will mean that the elements go vertical at larger available space, which a smaller min-width will have that change wait until the available space is much smallerok got it. I just played around with the values and yes it works that way. Well thank you for your time and knowledge. 💛
np!