Question

我将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师的帮助下，是否还能实现布局？

Answer 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属性允许元素在当前行没有更多空间时移动到下一行。使其完全响应。并且width属性设置为始终占据视口窗口的33％。

让我知道是否可行，或者您是否需要任何帮助。

下图如何实现布局？

1 个答案: