css flexbox wrapping and break

Question

Как я могу построить эту систему сетки в flexbox?

У меня есть следующий код:

<section> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div class="separator"></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div class="separator"></div> 
</section> 

, который я хочу показать, как это:

Правила:

• всегда 2 колонки
• ячейки в строках должны быть такой же высоты (динамические, на основе содержимого)
• никакого требования для строк, чтобы быть на ту же высоту, как друг с другими
• сепаратором строк должны принимать 2 колонки, и начать в крайнем левом столбце

можно получить все работая за исключением изготовления сепараторов перерыв правильно просто делать:

section 
{ 
    width: 800px; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
} 

div 
{ 
    width: 350px; 
    margin: 10px; 
} 

Благодаря

Answer 1

Это один из возможных способов:

section { 
 
    width: 800px; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
section > div { 
 
    flex: 0 0 calc(50% - 10px); 
 
    background-color: blue; 
 
    /*for the demo*/ 
 
    min-height: 100px; 
 
    margin: 5px; 
 
} 
 

 
section > .separator 
 
{ 
 
    flex-basis: 100%; 
 
    background-color: gray; 
 
    min-height: 10px; 
 
}

<section> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div class="separator"></div> 
 
    <div><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div class="separator"></div> 
 
</section>