Angularjs AngularJ以嵌套的矩形方式排列div

我有两个数组，要将其元素显示为嵌套div：

$scope.boxes = [{
    id:1,
    isLit: false,
    color: 'green'
}, {
    id:2,
    isLit: false,
    color: 'blue'
}, {
    id:3,
    isLit: false,
    color: 'red'
}, {
    id:4,
    isLit: false,
    color: 'yellow'
}];


$scope.images=[
{
    id:1, path: './img/Baum_grün.png', color:'green'
},
{
    id:2, path: './img/Baum_blau.png', color:'blue' 
},
{
    id:3, path: './img/Baum_rot.png', color:'red'
},
{
    id:4, path: './img/Baum_gelb.png', color:'yellow'
}
]

我想按以下方式排列它们（将这些星星视为图像）：

现在，我的模板如下所示：

<div class="outer-wrapper">
    <div class="inner-wrapper">
        <div class="box {{box.color}}" ng-repeat="box in boxes" ng-class="{'lit': box.isLit}" ng-click="boxClick(box.id)" ng-click="boxClick(box.id)" ng-audio="sounds/beep-08b.mp3" volume="0.5">
        </div>
    </div>

    <div class="image" ng-repeat="image in images" ng-if="showImages" ng-click="imageClick(image.id, image.color)">
        <img src="{{image.path}}">
    </div>
</div>

这段代码给出了以下结果：

---

我应该如何修改css/html以获得所需的结果，它至少在中等大小的屏幕上都具有响应能力？

如果您可以使用flexbox，这很容易，因为flexbox是CSS3中的新布局模式。您可以在此处阅读更多信息：

如果您可以使用它，以下是您可以使用它的方法：

<div id="first-container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

<div id="wrapper">
<div id="div-container">
  <div id="x">
  x
  </div>
  <div id="y">
  y
  </div>
</div>
<div id="div1-container">
  <div id="z">
  z
  </div>
  <div id="q">
  q
  </div>
</div>
</div>


<div id="second-container">
    <div id="c">
        a
    </div>
    <div id="d">
        b
    </div>
</div>

此外，这里还有一把小提琴：

<div id="first-container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

<div id="wrapper">
<div id="div-container">
  <div id="x">
  x
  </div>
  <div id="y">
  y
  </div>
</div>
<div id="div1-container">
  <div id="z">
  z
  </div>
  <div id="q">
  q
  </div>
</div>
</div>


<div id="second-container">
    <div id="c">
        a
    </div>
    <div id="d">
        b
    </div>
</div>

#first-container, #second-container {
    display: flex;
    justify-content: space-between;
}
#wrapper {
  display: flex;
  flex-direction: column;
}
#div-container, #div1-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

#a, #c {
    width: 20%;
    border: solid 1px #000;
}

#b, #d {
    width: 20%;
    border: solid 1px #000;
}