Flexbox - 如何在每行上获得2行，每行2个Flexbox

Question

正如tittle所说，我试图在每一行上获得两个弹性箱。这就是目前的样子：

这就是我想要实现的目标：

所以4个柔性盒，每排2个，第一个和第三个宽度相同，第二个和第四个宽度相同。我一直想弄清楚一段时间，有什么建议吗？

.left {
  background: #808080;
  flex-grow: 1;
  order: 1;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  flex-wrap: wrap;
  flex-direction: row;
  width: 25%;
}
.left,
.right {
  margin: 20px 20px;
  border-style: solid;
  border-color: black;
  border-width: 5px 5px 5px 5px;
}
.left.fixedsize {
  flex-basis: 25%;
}
.second img {
  margin: auto;
  display: block;
  padding-bottom: 10px;
  padding-top: 10px;
}
/*ADD-BUTTON*/

.left.fixedsize button {
  margin: auto;
  display: block;
  color: black;
  background-color: white;
  padding-bottom: 10px;
  padding-top: 10px;
  border-style: solid;
  border-color: black;
  border-width: 2px 2px 2px 2px;
  border-radius: 15px 15px 15px 15px;
}
.left.fixedsize button:hover {
  color: orange;
}
/*RIGHT*/

.right {
  background: #808080;
  flex-grow: 1;
  order: 1;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  flex-wrap: wrap;
  flex-direction: row;
  width: 75%;
}
.right h1 {
  margin-top: 20px;
}
.fixedsize {
  flex-basis: 75%;
}
.third img {
  padding: 10px;
}

<!--LEFT-->

<main>

  <div class="left fixedsize">
    <ul class="second">

      <li>
        <img src="TheIntouchables3.jpg" width="265" height="400" align="middle">
      </li>
      <li>
        <img src="TheIntouchables1.jpg" width="265" height="400" align="middle">
      </li>
    </ul>
  </div>

  <!--RIGHT-->


  <div class="right fixedsize">
    <h1>The Intouchables</h1> 


    <p>FRA 2011 (112 minutter)
      <br>Olivier Nakache / Eric Toledano
      <br>

      <a href="http://www.imdb.com/name/nm2031248/"> Alba Gaïa Kraghede Bellugi</a>,<a href="http://www.imdb.com/name/nm0494504/?ref_=ttfc_fc_cl_t3"> Anne Le Ny</a>, <a href="http://www.imdb.com/name/nm1109153/?ref_=ttfc_fc_cl_t4"> Audrey Fleurot</a>,
      <a
      href="http://www.imdb.com/name/nm0597042/?ref_=ttfc_fc_cl_t6">Clotilde Mollet</a>, <a href="http://www.imdb.com/name/nm0167388/?ref_=ttfc_fc_cl_t1"> Francois Cluzet</a>, <a href="http://www.imdb.com/name/nm1082477/?ref_=ttfc_fc_cl_t2"> Omar Sy</a>

        <br>
        <i>Norsk tittel:</i> De urørlige
        <br>
        <i>Genre:</i> drama, biografi, komedie
        <br>
        <br>Den sanne historien om to menn som aldri skulle ha møtt hverandre - De Urørlige er en oppløftende komedie om vennskap, tillit og menneskelige muligheter.
        <br>
        <br>Mangemillionæren Philippe er lam fra nakken og ned etter en paragliderulykke, og må leve resten av livet i rullestol. Han bor i luksuriøse omgivelser i Paris og skal ansette en ny pleieassistent. Den eneste av søkerne som skiller seg ut er Driss
        - den unge mannen som har levert søknaden kun fordi han må vise at han er aktiv arbeidssøker for å beholde trygdepengene. Snart begynner et usannsynlig kameratskap forankret i ærlighet og humor mellom to individer som på overflaten ikke ville
        hatt noe til felles.
        <br>
        <br>De Urørlige er basert på en utrolig, men sann historie. Filmen, som er sett av 20 millioner franskmenn, har blitt et internasjonalt fenomen og er den mest inntjenende ikke-engelskspråklige filmen i historien.
        <br>
        <br>
        <br>Se trailer <a href="https://www.youtube.com/watch?v=34WIbmXkewU">HER</a>
    </p>



    <ul class="third">
      <li>
        <img src="TheIntouchables2.jpg" width="600" height="385">
      </li>
    </ul>




  </div>
  </div>
  </div>

</main>

Answer 1

这是一个简单的样本：

.parent {width: 100%;display:flex;}
.left{flex:1; height:100px;}
.right{flex:3; height:100px;}

<div class="parent">  
     <div style="background-color:gray;" class="left">       </div>
     <div style="background-color:red;" class="right"></div>
    </div>
<div class="parent">
    <div style="background-color:yellow;" class="left"></div>
    <div style="background-color:green;" class="right"></div>
    </div>