在一个柔性容器中的柔性盒子砌体 [英] Flex box masonry in one flex-container

问题描述

出于不言而喻的原因，我需要以下flexbox网格:

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.

任何帮助将不胜感激.

推荐答案

使用普通标记和flexbox，可以做到这一点

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>

这篇关于在一个柔性容器中的柔性盒子砌体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！