CODEWITHSUNDEEP
cssflexbox
Andrew Bullock
Andrew Bullock

Reputation: 37378

CSS flexbox wrapping and breaking

How can I build this grid system in flexbox?

I have the following markup:

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

which I want to display like this:

Mockup

The rules are:

I can get everything working except making the separators break properly by simply doing:

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

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

Upvotes: 2

Views: 130

Answers (1)

Nico O
Nico O

Reputation: 14102

This is one possible way:

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>

Upvotes: 4

Related Questions