I've reordered some elements in my html using flexbox in the responsive design of a website which works fine but the elements then won't resize properly.
At a breakpoint I have applied a class of flex to the home-promos
div and reordered the elements. This works correctly.
The problem then arises when I try to resize the div's to percentage widths. They will only resize up to a certain point, such as 50% and then won't get any bigger.
Is anyone who is better with flexbox than myself able to tell me what the issue is?
.home-promos {
display: flex;
}
.home-promo-center {
order: 1;
}
.home-promo-left {
order: 2;
}
.home-promo-right {
order: 3;
}
<div class="home-promos">
<div class="home-promo-left">
<div class="promo-left-content">
*content*
</div>
</div>
<div class="home-promo-center">
<div class="promo-center-content">
*content*
</div>
</div>
<div class="home-promo-right">
<div class="promo-right-content">
*content*
</div>
</div>
</div>
flex-basis is limited by both max-width/max-height and min-width/min-height. When declared, flex-basis will override the width / height property set on a flex container.
By default, the child elements of a flexbox container will stretch vertically to fill the height of the container. This can be prevented by using the align-self property on the child element that you do not want to stretch. This Pen is owned by dev on CodePen.
A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink. flex-basis : This property specifies the initial length of the flex item. flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items.
flex: 1 0 200px; If you have one element that has a flex-basis of 200px, flex-grow of 1, and flex-shrink of 0, this element will be at minimum 200px wide, but it will be allowed to grow if there is extra space. In this case, you can think of the flex-basis as being a minimum width.
When you create a flex container (display: flex
or display: inline-flex
), it comes with several default settings. Among them are:
flex-direction: row
- flex items will align horizontallyjustify-content: flex-start
- flex items will stack at the start of the lineflex-wrap: nowrap
- flex items are forced to stay in a single lineflex-shrink: 1
- flex items are allowed to shrinkNote the last two settings.
Your three divs are forced to remain in a single line. Hence, their combined width is limited to the width of the container.
Also, they are allowed to shrink, which prevents them from overflowing the container. This also limits their width.
To apply whatever width you want to each flex item you can override these initial settings with:
flex-wrap: wrap
- now there's more space because flex items can break to new linesflex-shrink: 0
- now there's more space because flex items will not shrink and can overflow their container if necessaryIf you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With