CODEWITHSUNDEEP
flexbox
Marco
Marco

Reputation: 2737

Difference between flex: 0 0 100% and flex: 1 1 100%

I've tested the following but im asking, just in case there is a difference.

I have a container that is a flex container. The items have a property of flex: 1 1 100%. Just for curiosity purposes, I've also tested flex: 0 0 100% and I haven't notice any difference (maybe there is).

My question is: If the flex-basis is a 100%, does it even matter what the other 2 properties values are?

Upvotes: 7

Views: 10680

Answers (1)

symlink
symlink

Reputation: 12218

If the flex-basis is a 100%, does it even matter what the other 2 properties values are?

Yes. When the width of the items in a flexbox meet or exceed the width of the flexbox itself, flex-shrink comes into play (flex-grow only applies when the items are less than the width of the flexbox):

For example, in the case below, flex-shrink is set to 0 for the second item, so the second will not shrink, and will take up 100% of the viewport.

.flexbox{display:flex}
.item1,.item2{height:60px}
.item1{flex:1 1 100%;background-color:lightblue}
.item2{flex:0 0 100%;background-color:goldenrod}
<div class="flexbox">
    <div class="item1"></div>
    <div class="item2"></div>
</div>

If both items are set to flex-shrink:1, they will both take up half of the viewport (they shrink equally to 50%):

.flexbox{display:flex}
.item1,.item2{height:60px}
.item1{flex:1 1 100%;background-color:lightblue}
.item2{flex:0 1 100%;background-color:goldenrod}
<div class="flexbox">
    <div class="item1"></div>
    <div class="item2"></div>
</div>

If both are items set to flex-shrink:0, neither will shrink and they will both take up 100% of the viewport width, growing the width of the flexbox to twice that of the viewport:

.flexbox{display:flex}
.item1,.item2{height:60px}
.item1{flex:1 0 100%;background-color:lightblue}
.item2{flex:0 0 100%;background-color:goldenrod}
<div class="flexbox">
    <div class="item1"></div>
    <div class="item2"></div>
</div>

Upvotes: 8

Related Questions