Flexbox Два Ряды Две колонки

Question

<div class="flexbox"> 
    <div class="1"></div> 
    <div class="2"></div> 
    <div class="3"></div> 
    <div class="4"></div> 
    <div class="5"></div> 
</div> 

.flexbox{ 
height:500px; 
width:500px; 
} 

Я хочу что-то вроде этого https://awwapp.com/s/b6c9c247-2dba-4ec9-a47d-1f165679ba03/

Я не могу изменить свою структуру. Я хочу решение с flexbox.

Приказ о дозировке вещества до тех пор, пока у них один и тот же родитель.

Я пробовал использовать flex:wrap. с шириной, высотой = 50% от двух разделов и ширины, высота = 50%, 33,3% отдыха три, но это дало мне что-то вроде https://awwapp.com/s/237968ae-c13f-4d0d-bab2-07024486b3c4/

.

Может ли кто-нибудь помочь мне?

Answer 1

Надеется, что это будет решение четыре ваших проблемы

.flexbox{ 
 
    height: 500px; 
 
    width: 500px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    flex-wrap: wrap; 
 
} 
 
.flexbox div { 
 
    width: 40%; 
 
    background: green; 
 
    height: 30%; 
 
} 
 
.flexbox .one, .flexbox .two{ 
 
    height: 45%; 
 
}

<div class="flexbox"> 
 
    <div class="one">one</div> 
 
    <div class="two">two</div> 
 
    <div class="three">three</div> 
 
    <div class="four">four</div> 
 
    <div class="five">five</div> 
 
</div>

Вот рабочая версия jsFiddle.

Answer 2

попробовать это:

<div class="flexbox"> 
     <div class="left-side"> 
      <div class="one"></div> 
      <div class="two"></div> 
     </div> 
     <div class="right-side"> 
      <div class="three"></div> 
      <div class="four"></div> 
      <div class="five"></div> 
     </div> 

    </div> 

CSS:

.flexbox{display : inline-flex; 
height:500px; 
width:500px;}