CODEWITHSUNDEEP
cssflexbox
noppe
noppe

Reputation: 397

Flex box masonry in one flex-container

For reasons left unspoken, I need this flexbox grid:

http://codepen.io/af_bergstrom/pen/jqoJBb

.flex.flex__row
   .flex__item.red
   .flex__item.flex__item--large.blue
   .flex__item.green

to work in the following manner, I need the green box to align to the left of the blue box, under the red box.

The markup can be changed with the items switching physical order, but I cannot wrap elements in columns.

Any help would be greatly appreciated.

Upvotes: 0

Views: 400

Answers (1)

Asons
Asons

Reputation: 87191

With plain markup and flexbox, this will do that

body {
  max-width: 500px;
  margin: 0 auto;
}
.flex {
  display: flex;
  background: gray;
  height: 200px;
}
.flex__col {
  flex-direction: column;
  flex-wrap: wrap;
}
.flex__item {
  height: 100px;
}
.flex__item--large {
  height: 200px;
}
.red {
  background: red;
}
.green {
  background: green;
}
.blue {
  background: blue;
}
<div class='flex flex__col'>
  <div class='flex__item red'></div>
  <div class='flex__item green'></div>
  <div class='flex__item flex__item--large blue'></div>
</div>

Upvotes: 1

Related Questions