Flexbox - 如何创建响应式动态弹性箱网格

Question

我想学习并尝试Flexbox，因此只需构建一个如下所示的网格结构：

可能的盒子尺寸：4x4,2x1,1x1 - 它们在任何地方都是动态的。

响应所有相同尺寸的盒子

其实我有这个：

＆＃13;

＆＃13;

.tab {
  width: 500px;
  height: 100px;
  display: flex;
  flex-flow: column wrap-reverse;
  color: green;
}

.col-wrap-4x4 {
  width: 200px;
  height: 200px;
  display: flex;
  flex-flow: column wrap;
}
.col-1x1 {
  background-color: black;
  border: solid 1px green;
}
.col-1x1.one {
  width: 50px;
  height: 50px;
}
.col-1x1.two {
  width: 100px;
  height: 50px;
}
.col-1x1.four {
  width: 100px;
  height: 100px;
}

＆＃13;

<div class="tab">
  <div class="col-wrap-4x4">
    <div class="col-1x1 four">1</div>
    <div class="col-1x1 two">2</div>
    <div class="col-1x1 one">3</div>
    <div class="col-1x1 one">4</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

到目前为止，我所尝试的一切都没有奏效。 无论如何都有这样的事情吗？

Answer 1

喜欢这个吗？

不要忘记你的父元素必须与你孩子的+边框或边距

一样大

.tab {
  width: 604px;
  height: 100px;
  flex-flow: column wrap-reverse;
  display: block;
  color: green;
}

.col-wrap-4x4 {
  width: 230px;
  height: auto;
  display: inline-block;
  flex-flow: column wrap;
}
.col-1x1 {
  background-color: black;
  /*border: solid 1px green;*/
}
.col-1x1.one {
  width: 50px;
  height: 50px;
}
.col-1x1.two {
  width: 110px;
  height: 50px;
}
.col-1x1.four {
  width: 100px;
  height: 110px;
}
.myClass{
   display: inline-block;
  float: left;
   position: relative;
    margin : 10px 5px 0;
}

<div class="tab">
                                <div class="col-wrap-4x4">
                                    <div class="col-1x1 myClass four">1</div>
                                    <div class="col-1x1 myClass two">2</div>
                                    <div class="col-1x1 myClass one">3</div>
                                    <div class="col-1x1 myClass one">4</div>
                                </div>
                            </div>

格尔茨