CODEWITHSUNDEEP
htmlcssflexbox
marmistrz
marmistrz

Reputation: 6414

A responsive two-column layout using flexbox

I have a small layout of sections 

.collection {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.collection section {
  width: 50%;
}
<div class="collection">
  <section>
    <h2>bar</h2>
  </section>

  <section>
    <h3>baz</h3>
  </section>

  <section>
    <h1>FOO</h1>
  </section>
</div>

Then everything is positioned in one column. I'd expect such a layout 

___________
| h2 |    |
|____| h1 |
|_h3_|____|

I know that the layout would wrap if I set max-width. But I don't know the div size in advance. My intent is to wrap in such a way that both columns have equal height.

How can I achieve it?

Upvotes: 2

Views: 960

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372019

By giving the h1 section a 100% height, it will be forced into a new column.

* {
    margin: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

.collection {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
}

.collection section {
    width: 50%;
    flex: 1;
    border: 1px dashed black;
}

.collection section:last-child {
    flex-basis: 100%;
}

@media ( max-width: 700px ) {
    .collection section { width: 100%; } 
    .collection section:last-child { flex-basis: auto; } 
}
<div class="collection">
    <section><h2>bar</h2></section>
    <section><h3>baz</h3></section>
    <section><h1>FOO</h1></section>
</div>

jsFiddle

Upvotes: 1

Related Questions