如何实现下图中的布局？ [复制]答案

【问题标题】：How to achieve the layout in the following image? [duplicate]如何实现下图中的布局？ [复制]
【发布时间】：2020-10-27 13:27:04
【问题描述】：

我把div分成两部分，每部分都用Flex Box实现。

<!--My Trials-->
<body>
  <div>
    <div class="container1" style="display: flex;">
      <div class="item1" style="flex:1;background-color: yellowgreen;">1</div>
      <div class="item1" style="flex:1;background-color: lightseagreen;">2</div>
      <div class="item1" style="flex:1;background-color: palevioletred">3</div>
    </div>
    <div class="container2" style="display: flex;">
      <div class="item2" style="flex:1;background-color: lightskyblue;">4</div>
      <div class="item2" style="flex:2;visibility: hidden;">5</div><!-- hide the 5th div -->
    </div>
  </div>
</body>

我想知道如何将每个 div 变成一个正方形。
没有第 5 个 div 的帮助，有没有办法实现布局？

【问题讨论】：

添加 height 属性

标签： html css layout flexbox

【解决方案1】：

.container {
    display: flex;
    flex-wrap: wrap;
}

.item1 {
    height: 100px;
    width: 33%;
    background-color: lightblue;
    color: black;
}

.item2 {
    height: 100px;
    width: 33%;
    background-color: lawngreen;
    color: black;
}

.item3 {
    height: 100px;
    width: 33%;
    background-color: pink;
    color: black;
}

.item4 {
    height: 100px;
    width: 33%;
    background-color: orange;
    color: black;
}

<body>
    <div class="container">
        
        <div class="item1">This is square 1</div>

        <div class="item2">This is square 2</div>

        <div class="item3">This is square 3</div>

        <div class="item4">This is square 4</div>

    </div>
  </body>

flex-wrap 属性允许元素在当前行没有更多空间时移动到下一行。使其完全响应。并且宽度属性设置为始终占据视口窗口的 33%。

让我知道这是否有效，或者您是否需要任何帮助。

【讨论】：

嗨 Paulie_D 我希望情况会好一些。