How do the five flex items rank in proportion to two lines, and the second line shows only the first two?

the effect is as follows:

clipboard.png

there are three rows like this, and each flex item occupies 33.3333% of the principal axis space, so I divided two horizontal flex containers as the previous vertical flex item. Now the problem is how to arrange the first two flex items in line 2 (if the width of the flex item is not limited, I think it cannot be divisible). Now I add an empty flex item after the second line, and then enlarge it with flex:1. But with an empty div, ask the boss for advice on a better way.

Mar.31,2021

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>
<style>
  .row {
    width: 300px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }
  .col{
    flex: 0 0 33.333333%;
    height: 80px;
    box-sizing: border-box;
    border: 1px solid -sharpdcdfe6;
  }
</style>
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea21e2-1bb2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea21e2-1bb2.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?