Flex WRAP discussion

HTML & CSS
26

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.