Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there any use for flex-shrink when flex-wrap is wrap?

Tags:

css

flexbox

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?

like image 629
Vandervals Avatar asked Apr 26 '16 14:04

Vandervals


People also ask

What is the use of flex-shrink?

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.

What happens with flex-wrap?

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.

What can I use instead of flex-wrap?

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.

How do you use flex wrap in CSS?

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.

What is the difference between flex-wrap and nowrap?

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.

What is the use of flex-wrap?

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.

How do you use flex shrink in CSS?

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.


1 Answers

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>
like image 117
zzzzBov Avatar answered Sep 29 '22 11:09

zzzzBov