Flex WRAP discussion

Out of Topic→

Sometimes I feel I should go with CSS logic, but I get stuck at places and have to post for help. Is there any issue in my learning methodology or this is how any technology is, and everyone gets acquainted and develops expertise only through practice and through trial and error?

1 Like

Flex is quite complex and I often have to double check the rules and in those cases I go to the W3C specs or the MDN network and check exactly how things are supposed to work.

However trial and error is the way I learn most because the lessons stick in my brain better that way.

So I would say read up on the property to see how it should work and then test it out and understand it :slight_smile:

1 Like

Thanks for the reply, In fact I think this is true for everything and anything even we learn mathematics, physics or any other subject in school only through practice and trial and error.

1 Like

Hi there,
Here is the live demo.

I have a parent div, which is a flex, and two children div, which have flex-grow.
Left div has flex-grow 1 and right has flex-grow: 3 which means 25% and 75% space of the container is allocated?
But the result is in violation and somethings seem to be in error.

That’s not loading for me.

No :slight_smile: Flex grow specifies how much of the remaining space in the flex container should be assigned to the item. It does not mean 75% or 25%. You would need to set flex-basis for that or add a width.

.box25 {
  flex: 1 0 25%;
}
.box75 {
  flex: 1 0 75%;
}

1 Like

Hi there sir, accidentally index.html got deleted. I have reloaded.

Flex is very confusing. The more I try to learn it and master it so that I have to post the least questions on the forum the more I get confused.

One more thing sir, You said remaining space, but flex doesn’t leave any remaining space unless you constrain some div to a certain width, and in that case, I think the other div being a flex subscriber will eventually take away the remaining space. so adding an extra property of flex-grow is useless there too.

flex-grow property I could not understand how is useful.

Your Flex:
In your flex the first part has the HTML:

<div class="wrap">
  <div class="box box1">Flex grow 1</div>
  <div class="box box2">Flex grow 3</div>
</div>

and the CSS:

.wrap {
  display: flex;
  max-width: 1280px;
  margin: 10px auto 20px;
  padding: 10px;
  background: #ccc;
}
.box {
  padding: 10px;
  border: 1px solid red;
}
.box1 {
  flex-grow: 1;
}
.box2 {
  flex-grow: 3;
}

My own link is active now I did the same thing, but those flex-grows are yet not working in my case.

The remaining space is only there if your content does not fill the whole width. If you fill the flex children with content then there is no remaining space as such. You need to use the flex-grow with flex-basis at the same time. That’s why they recommend in the specs that you use the shorthand to set the properties.

e.g.
flex:1 0 0%;

Flex-basis is auto by default (which basically means look at my content width) but if you set it to zero (IE11 like a % on the end of that unit) then you will see that the divs are roughly 3 to 1 in size even when filled with content.

I’ve added 3 more lines to my demo using the shorthand using 0% and you can see that now they are roughly 3 to 1 without any widths needed. The won’t be exactly the same as 75% and 25% because some space is taken into account.

Does that make it easier to understand. use shorthand and always set the basis when you have fluid content.

Yes they are working but 3 time nothing is still nothing. There is no free space to distribute :slight_smile:

1 Like

So there are two ways to do it →

image

and

image

Thank you so much for such an explanation, but I have a question, sir.

Suppose two inner DIV's are there → and in case want to give flex-grow 1 and 3 through the second way → boxbasis1 + boxbasis2, but at the same time I want that left div should have minimum 400PX width

I tried this:

.boxbasis1 {
  flex: 1 0 400px;
}
.boxbasis2 {
  flex: 3 0 0%;
}

But it doesn’t work.

This type of arrangement is not going to work →
image

because 400px it will treat as 400 number and 1 in .sright

min-width:400px

1 Like

I think that the discussion but I have understood these concepts →

.sleft {
	flex:1 0 400px;	
}
.sright {
	flex:3 0 0%;
}

Finally, I got this.

image

I think the programing logic here will be →

flex-basis acts as a constraint, in general, that is what flex-basis does and alloting min-width to the DIV. In this case, the remaining available space will be divided by 1-3 combination.

Flex-basis is not a guaranteed measurement because it depends on whether flex-grow or shrink are also in effect. so flex:1 0 400px would would be 400px if there was enough room but it may also be bigger because the grow will make it grow.

I think you’ve got the basics but it is quite complicated because they all interact with each other and you can have quite a few variations depending on content and property.

Also flex-basis will override a width that has been set but will obey min-width and max-width.

1 Like