Combining flex shorthand with percentage width?

0

Issue

The SUITCSS size utilities combine flex shorthand with percentage width into u-sizeXofY utilities.

Here’s is a link to the tests.

The flex property is set like this:

flex: 0 0 100%;

And it’s combined with u-sizeXofY utilities like this:

 width: 50% !important;

What I’m trying to understand is why they are doing that?

What is the reason for combining flex: 0 0 100% with the width: 50% !important; utility?

Solution

First the class u-sizeXofY is defined as follow:

-webkit-flex-basis: auto !important;
-ms-flex-preferred-size: auto !important;
flex-basis: auto !important;
width: 50% !important;

So if we combine this with .u-fullWidthFlex (flex:0 0 100%) we will have this setting:

width:50%;
flex-basis:auto; /*default value*/
flex-shrink:0;
flex-grow:0; /*default value*/

So basically we are simply adding flex-shrink:0 to disable the shrink effect which will have an effect in case there is an overflow with multiple items.

Here is a basic example:

.box {
  display:flex;
  width:300px;
  border:2px solid red;
  margin:10px;
}

.box > span {
  height:20px;
  background:yellow;
  outline:1px solid;
  width:50%;
}
.shrink > span {
 flex-shrink:0;
}
<div class="box">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="box shrink">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

You can get more details here: Why is a flex-child limited to parent size?.

In case you will enable the wrap, we can say that it’s useless to add flex-shrink:0 since we will trigger the wrapping instead of shrinking:

.box {
  display:flex;
  width:300px;
  border:2px solid red;
  margin:10px;
  flex-wrap:wrap;
}

.box > span {
  height:20px;
  background:yellow;
  outline:1px solid;
  width:50%;
}
.shrink > span {
 flex-shrink:0;
}
<div class="box">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="box shrink">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Using this class will make sure that the width of the element will be half the width of the container thus you won’t get suprised by any shrink effect which is not something trivial. Having an overflow, will be more logical as you will somehow understand that you made a mistake by add more element than needed or by forgetting to enable the wrapping.

Another reason to combine such classes may also be related to media query where we can for example define the u-sizeXofY at only some breakpoints thus you may have different behavior with and withount flex-basis:0 0 100%

.box {
  display:flex;
  width:300px;
  border:2px solid red;
  margin:10px;
  flex-wrap:wrap;
}

.box > span {
  height:20px;
  background:yellow;
  outline:1px solid;
  flex:0 0 100%;
}

@media all and (min-width:800px) {
  .half {
    width:50%!important;
    flex-basis:auto!important;
  }
}
<div class="box">
  <span class="half"></span>
  <span class="half"></span>
  <span class="half"></span>
  <span class="half"></span>
</div>

As you can see, flex:0 0 100% will set an initial width for our element to be 100% which is the default behavior of block element like div thus intuive for us. Then the half class will override this. If you remove flex:0 0 100% you will simply see nothing because the elements are empty.

Answered By – Temani Afif

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More