嵌套 DIV - 4 个 div（正方形），其中 1 个有 4 个 div（正方形），其中 1 个有 4 个 div（正方形）答案

【问题标题】：Nested DIVs - 4 divs (squares) of which 1 has 4 divs (squares) of which 1 has 4 divs (squares)嵌套 DIV - 4 个 div（正方形），其中 1 个有 4 个 div（正方形），其中 1 个有 4 个 div（正方形）
【发布时间】：2016-05-25 08:37:19
【问题描述】：

这是关于在 1 个 div 中嵌套 4 个 div（正方形），这是 4 个 div 的一部分 ...

我在包装器中使用 display: flex 并用于被包装的物品本身，否则它将不起作用

对我来说，这感觉像是一个糟糕的 hack，但我尽量不使用 float。你会如何处理这个话题？

这是JSBIN上的演示。

这是 HTML 代码：

<body>
<div>
  <div id="DIV">
    <div id="div1_inside_div" style="border:none">
      <div id="div2_inside_div1" style="border: none;">
        <div id="div3_inside_div2" style="border: none;">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div> 
          </div>
        <div>2</div>
        <div>3</div>
        <div>4</div>   
        </div>
      <div>2</div>
      <div>3</div>
      <div>4</div>   
    </div>
  <div>2</div>
  <div>3</div>
  <div>4</div>   
  </div>
</div>
</body>

这是 CSS 代码：

body {
  width: 90%;
  height: 90%;
  margin-left:auto;
  margin-right:auto
}

/* DIV */

#DIV {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}


#DIV > div{
    box-sizing: border-box;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50%;
    min-height: 50%;
    background-color: lightgreen;
    border: dashed 1px gray;
}

/* DIV1 INSIDE DIV */

#div1_inside_div {
   flex-wrap: wrap 
}

#div1_inside_div div {
    box-sizing: border-box;
    margin: 0px;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50%;  
    background-color: yellow;
    border: dashed 1px black;
}

/* DIV2 INSIDE DIV1 */

#div2_inside_div1 {
    flex-wrap: wrap; 
}

#div2_inside_div1 div {
    box-sizing: border-box;
    margin: 0px;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50%;  
    background-color: pink;
    border: dashed 1px black;
}


/* DIV3 INSIDE DIV2 */

#div3_inside_div2 {
    flex-wrap: wrap; 
}

#div3_inside_div2 div {
    box-sizing: border-box;
    margin: 0px;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 50%;  
    background-color: lightblue;
    border: dashed 1px blue;
}

谢谢！ J

【问题讨论】：

看起来不错。不错的工作。那么有什么问题呢？
感谢 Michael_B。对我来说，这似乎是一种黑客行为。由于在过去两周内我只做了几个晚上的 HTML 和 CSS，我不确定该解决方案是否合适。 ..但是根据您的反馈，似乎还可以。很高兴知道。贝斯特，J。
看起来不错。但是现在您已经完成了问题，我们可以查看代码。
代码在 JSbin 中也应该可见。
对，但根据 SO 准则，代码也应该发布在问题中。如果有一天你的 jsbin 链接失效了怎么办？那么这个问题就变得毫无参考价值了。

标签： html css alignment flexbox

【解决方案1】：

对于这个问题，您可以考虑使用 Bootstrap 等框架，它可以让您使用基于网格的元素定位系统非常轻松地解决这个问题。除此之外，Bootstrap 将允许您的 div 自动响应。

值得一看，希望对你有帮助:)

【讨论】：

您好！是的，框架。我是一个绝对的 Web 开发初学者，想在开始走“捷径”之前了解 CSS（HTML 和 JavaScript）的要点。我将很快检查 Bootstrap。为提示干杯！
嘿！这很公平！一旦你首先了解了这些东西，像 Bootstrap 这样的东西绝对值得一看，虽然仍然是编码，但 Bootstrap 确实可以通过响应性和跨浏览器兼容性来增强你的页面。祝你一切顺利:)

【解决方案2】：

不，这不是黑客攻击。

您的元素同时充当弹性容器，以及来自上层弹性容器的弹性项目。

但是，您的代码可能更干燥。例如：通过所有布局重用容器和容器子：

body {
  width: 90%;
  height: 90%;
  margin-left: auto;
  margin-right: auto
}

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.container > div {
  box-sizing: border-box;
  width: 50%;
  height: 50%;
}

/* specific properties */
.level1 {
  height: 440px;
}

.level1 > div {
  background-color: lightgreen;
  border: dashed 1px black;
}
.level2 > div {
  background-color: yellow;
  border: dashed 1px black;
}
.level3 > div {
  background-color: pink;
  border: dashed 1px black;
}
.level4 > div {
  background-color: lightblue;
  border: dashed 1px blue;
}

<div>
  <div class="container level1">
    <div class="container level2">
      <div class="container level3">
        <div class="container level4">
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
        </div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

【讨论】：

感谢您的评价，瓦尔斯！同意，可以简化代码。不幸的是，我仍然没有足够的分数来支持你的帖子。但是一旦我达到了“15”这个神奇的门槛，我就会这样做。最佳，J