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.

Html css
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>

Previous: Read the question of "js Advanced programming"?

Next: How does js get the timestamp of 16:00:00 this Friday afternoon?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu