How to specify how many items do I want in a certain row using flex? [duplicate]

Question

(reformulated question)

Hello. There's no problem when using full-screen. But when I squeeze it this happens.

Instead of having 3 items and then 1 item, 1 item, 1 item, 1 item, 1 item, I would like it to be 3 items, 3 items, 3 items.

When I squeeze it even more there is no problem. I get 2 items, 2 items, 2 items.

Thank you.

<div class="items">
        <div class="row">
            <div class="item">
                <img src="img/1.jpg" />
                <h2>Lorem Ipsum</h2>
                <h3>$101</h3>
                <div class="buy_buttons">
                    <button class="b_buy">Comprar</button>
                    <button class="b_vista">Vista</button>
                </div>
            </div>
            <div class="item">
                <img src="img/2.jpg" />
                <h2>Lorem Ipsum</h2>
                <h3>$101</h3>
                <div class="buy_buttons">
                    <button class="b_buy">Comprar</button>
                    <button class="b_vista">Vista</button>
                </div>
            </div>
            <div class="item">
                <img src="img/3.png" />
                <h2>Lorem Ipsum</h2>
                <h3>$101</h3>
                <div class="buy_buttons">
                    <button class="b_buy">Comprar</button>
                    <button class="b_vista">Vista</button>
                </div>
            </div>
            <div class="item">
                <img src="img/2.jpg" />
                <h2>Lorem Ipsum</h2>
                <h3>$101</h3>
                <div class="buy_buttons">
                    <button class="b_buy">Comprar</button>
                    <button class="b_vista">Vista</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="item">
                <img src="img/1.jpg" />
                <h2>Lorem Ipsum</h2>
                <h3>$101</h3>
                <div class="buy_buttons">
                    <button class="b_buy">Comprar</button>
                    <button class="b_vista">Vista</button>
                </div>
            </div>
            <div class="item">
                <img src="img/2.jpg" />
                <h2>Lorem Ipsum</h2>
                <h3>$101</h3>
                <div class="buy_buttons">
                    <button class="b_buy">Comprar</button>
                    <button class="b_vista">Vista</button>
                </div>
            </div>
            <div class="item">
                <img src="img/1.jpg" />
                <h2>Lorem Ipsum</h2>
                <h3>$101</h3>
                <div class="buy_buttons">
                    <button class="b_buy">Comprar</button>
                    <button class="b_vista">Vista</button>
                </div>
            </div>
            <div class="item">
                <img src="img/2.jpg" />
                <h2>Lorem Ipsum</h2>
                <h3>$101</h3>
                <div class="buy_buttons">
                    <button class="b_buy">Comprar</button>
                    <button class="b_vista">Vista</button>
                </div>
            </div>
        </div>
    </div>

css:

.row {
    width: 95%;
    height: auto;
    display: flex;
    margin: 0 auto;
    flex-flow: wrap;
    justify-content: space-around;
}

.items{
    width:95%;
    margin:0 auto;
}

.item {
    box-shadow: 0px 0px 8px #000;
    margin: 0px auto 30px auto;
    padding: 15px 0;
    width: 330px;
}

Answer 1

You could use width: calc(100%/n); where n represents the number of items you want in each row. You can see the example provided below with four items per row.

.row {
  width: 95%;
  height: auto;
  display: flex;
  margin: 0 auto;
  justify-content: space-around;
}

.items {
  width: 95%;
  margin: 0 auto;
}

.item {
  box-shadow: 0px 0px 8px #000;
  margin: 0 1em;
  padding: 15px 0;
  width: calc(100%/4);
}

<div class="items">
  <div class="row">
    <div class="item">
      <img src="img/1.jpg" />
      <h2>Lorem Ipsum</h2>
      <h3>$101</h3>
      <div class="buy_buttons">
        <button class="b_buy">Comprar</button>
        <button class="b_vista">Vista</button>
      </div>
    </div>
    <div class="item">
      <img src="img/2.jpg" />
      <h2>Lorem Ipsum</h2>
      <h3>$101</h3>
      <div class="buy_buttons">
        <button class="b_buy">Comprar</button>
        <button class="b_vista">Vista</button>
      </div>
    </div>
    <div class="item">
      <img src="img/3.png" />
      <h2>Lorem Ipsum</h2>
      <h3>$101</h3>
      <div class="buy_buttons">
        <button class="b_buy">Comprar</button>
        <button class="b_vista">Vista</button>
      </div>
    </div>
    <div class="item">
      <img src="img/2.jpg" />
      <h2>Lorem Ipsum</h2>
      <h3>$101</h3>
      <div class="buy_buttons">
        <button class="b_buy">Comprar</button>
        <button class="b_vista">Vista</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="item">
      <img src="img/1.jpg" />
      <h2>Lorem Ipsum</h2>
      <h3>$101</h3>
      <div class="buy_buttons">
        <button class="b_buy">Comprar</button>
        <button class="b_vista">Vista</button>
      </div>
    </div>
    <div class="item">
      <img src="img/2.jpg" />
      <h2>Lorem Ipsum</h2>
      <h3>$101</h3>
      <div class="buy_buttons">
        <button class="b_buy">Comprar</button>
        <button class="b_vista">Vista</button>
      </div>
    </div>
    <div class="item">
      <img src="img/1.jpg" />
      <h2>Lorem Ipsum</h2>
      <h3>$101</h3>
      <div class="buy_buttons">
        <button class="b_buy">Comprar</button>
        <button class="b_vista">Vista</button>
      </div>
    </div>
    <div class="item">
      <img src="img/2.jpg" />
      <h2>Lorem Ipsum</h2>
      <h3>$101</h3>
      <div class="buy_buttons">
        <button class="b_buy">Comprar</button>
        <button class="b_vista">Vista</button>
      </div>
    </div>
  </div>
</div>