中心列占用兩倍的空間 - css 布局

Question

在我的應用程序中，我需要創建一個如下圖所示的布局。我嘗試使用 flex 它似乎不起作用，伙計們幫助我了解如何使用 flexbox css 實現此布局。 第一行應該是四個 div，第二行應該是三個 div

 body{ background-color:#f5f6fa; } .parent{ margin:20px; display:flex; flex-wrap: wrap; } .child{ flex: 1 0 21%; margin: 10px; height: 200px; background-color: #fff; border-radius: 4px 4px 0 0; }

 <div class="parent"> <div class="child" ></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>

Answer 1

如果你想堅持使用 flexbox，那么試試這些代碼。 （但網格會更合適）

  <div class="parent flex-container align-items-stretch">
      <div class="child" style="flex-grow: 1">1</div>
      <div class="child" style="flex-grow: 1">2</div>
      <div class="child" style="flex-grow: 1">3</div>
      <div class="child" style="flex-grow: 1">4</div>
      <div class="child" style="flex-grow: 1">5</div>
      <div class="child" style="flex-grow: 12">6</div>
      <div class="child" style="flex-grow: 1">7</div>
  </div>

Answer 2

我建議你使用display:grid; 而不是flexbox 。

這是一個如何輕松完成此操作的示例。

grid-template-columns: repeat(4, 1fr); 創建 4 列，並重復它們直到達到最大值 4。

從.child類中選擇第六個孩子並給他grid-column:span 2; ，使他跨越兩列。

grid-gap:20px; 設置所有網格列之間的空間。

 body{ background-color:#f5f6fa; } .parent{ margin:20px; display:grid; grid-template-columns: repeat(4, 1fr); grid-gap:20px; } .child{ height: 200px; background-color: #fff; border-radius: 4px 4px 0 0; } .child:nth-child(6){ grid-column:span 2; }

 <div class="parent"> <div class="child" ></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>

Answer 3

flex-basis CSS 屬性設置彈性項目的初始主尺寸。 它設置內容框的大小，除非另外設置了 box-sizing。

 body{ background-color:#f5f6fa; } .parent{ margin:20px; display:flex; flex-wrap: wrap; } .child{ flex: 1 0 21%; margin: 10px; height: 200px; background-color: #fff; border-radius: 4px 4px 0 0; } .bigger{ flex-basis: 46%; }

 <div class="parent"> <div class="child" >1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child bigger">6</div> <div class="child">7</div> </div