Flash it, Flex nine

Talk is cheap, show you the code.

First, we use Displat: Flex to easily implement the following layout:

  <div class="app">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
Copy the code

.app {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  width: 300px;
}

.item {
  border: 1px solid lightpink;
  width: 98px;
}
Copy the code

If I change width, I have to calculate, and I have to change the code, who can handle that, keep thinking about it. Flex-basis: 33%. Is it possible to free up my calculator? Try it

.item {
  border: 1px solid lightpink;
  flex-basis: 33%;
}
Copy the code

Because of border, the content in box is 98px, so 98/300=32.6667, look at 32%

.item {
  border: 1px solid lightpink;
  flex-basis: 32%;
}
Copy the code

The problem is also obvious, there is a bit more space on the right side, that 0.66666667% lost duck, annoying

“My old brother,” said Big Pie, “there’s no way

I can’t throw in the towel, so I continue to look at flex properties

Big cake said, grow, grow, let them grow up, and then have the following try

.item {
  border: 1px solid lightcoral;
  flex-grow: 1;
}
Copy the code

Flex-grow: 1. If there is any space left, it is divided equally between each item.

But it’s not three in this business. Get a ball.

I gave it a rough try and set the width of each to 30%

.app {
  margin-top: 300px;
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  width: 300px;
  background: lightgray;
}

.item {
  border: 1px solid lightcoral;
  flex-grow: 1;
  flex-basis:30%;
}
Copy the code

watch out!!!

Yes, I have. On second thought, although it is only 30%, the remaining space is full because it has grown. Brother Neesi

So, the conclusion is you get down, bye 👋