I don't think flex-shrink
and flex-wrap:wrap;
make sense together but I wonder if there is something I'm missing.
.container{
background: #DDD;
width: 300px;
height: 100px;
padding: 20px;
display: flex;
flex-direction: row;
flex-wrap: nowrap
}
.tags{
background: orange;
box-sizing: border-box;
flex: 1 3 200px;
}
.redes{
background: cyan;
box-sizing: border-box;
flex: 0 1 200px;
}
.wrap{
flex-wrap: wrap;
}
<div class="container">
<div class="tags">box1</div>
<div class="redes">box2</div>
</div>
<div class="container wrap">
<div class="tags">box1</div>
<div class="redes">box2</div>
</div>
I understand that when, flex-wrap
is set to nowrap, the negative space gets distributed using the values on flex-shrink
. Meanwhile, if flex-wrap
is set to wrap, there can't be any negative space, can it? Therefor this property is just useless, or at least I can see any effect. Is this right?
Definition and Usage The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container. Note: If the element is not a flexible item, the flex-shrink property has no effect.
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
An alternative to using flex-wrap: wrap would be to switch from flex-direction: row to column using a media query. Show activity on this post. An other alternative to flex is to remove display: flex on the container and use display: inline-block on all item images.
The CSS flex-wrap property is used to specify whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked. It is used to designate a single line or multi-line format to flex items inside the flex container.
The parent element must be made a flex container before flex-wrap can be applied. The flex-wrap property gets applied to the flex container only (not the child elements). By default, a flex container will try to fit its child elements on one line. This is also known as nowrap for the flex-wrap property.
The flex-wrap property is used to specify the controls whether the flex-container is single-line or multi-line. wrap − In case of insufficient space for them, the elements of the container (flexitems) will wrap into additional flex lines from top to bottom.
The CSS flex-shrink property is used to specify the flex shrink factor of the flex element. If you have more than multiple flex items in the same container in a row, CSS flex-shrink lets you shrink one item out of them when there is not enough space. But the item must be flexible; otherwise, the flex-shrink will not work.
Meanwhile, if flex-wrap is set to wrap, there can't be any negative space, can it?
If an element is wider than the flex
container, it can't wrap across multiple lines, but it can shrink.
Therefor this property is just useless, or at least I can see any effect. Is this right?
Nope, you'll see the effect when a flex item would otherwise overflow its parent container.
.box {
background-color: pink;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.wide {
background-color: lightgreen;
flex: 0 0 auto;
margin: 10px 0;
width: 150%;
}
.shrink {
background-color: lightblue;
flex-shrink: 1;
}
<div class="box">
<div class="wide shrink">
Wide, shrinks
</div>
<div class="wide">
Wide, won't shrink
</div>
</div>
If 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