Flexbox或Column CSS用于定位这样的元素

Question

有没有任何解决方案可以避免浮动并使用flexbox并在我的表示中进行这种类型的布局？我没有任何例子，只有我需要的这张照片。

我会尝试用文字解释：

• 此网格从1025px开始，有2列，右侧是大红色正方形。
• 从1100px我需要3列和右边的大红色方块
• 从1680px我将有4列和右边的大红色方块。

1. 物品的位置必须与我的照片相似
2. 根据纵横比，4个项目将与其他项目相比：5,6,7,8将下降9,10，依此类推。
3. 前两行的大红色必须始终保持相同的高度。
4. 所有布局都流畅且响应迅速

我可以用FLOAT和一些JS来计算前两行的完全相同的高度并使大红色具有相同但我想使用flexbox（如果可能的话）。

我到目前为止的代码

.grid {
  display: flex;
  flex-direction: row;
}
.item {
  width: 16%;
  margin: 5px;
}
.red-box {
  
}

<div class="grid">
  <div class="red-box">big box</div>
  
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>  
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
  <div class="item">Item 13</div>
  <div class="item">Item 14</div>
  <div class="item">Item 15</div>
  <div class="item">Item 16</div>
  <div class="item">Item 17</div>
  <div class="item">Item 18</div>
  <div class="item">Item 19</div>
  <div class="item">Item 20</div>
</div>

Answer 1

如果将Flexbox与绝对位置结合使用，则可以实现这一目标。

我所做的是利用order属性将红色元素定位在右上角。然后，可以使用媒体查询控制其位置。

为了强制第二行末尾的换行，我使用了一个与right_corner元素大小相同的伪元素，并使用order属性来定位它。

为了使红色元素居中，我使用一个绝对定位的包装和Flexbox，它将占用两倍的高度，并覆盖2行。

堆栈代码段

.container {
  display: flex;
  flex-wrap: wrap;
  counter-reset: num;
}

.container .right_corner > div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(200% + 10px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .right_corner > div > div {
  width: 300px;
  min-width: 300px;
  height: 250px;
  background: red;
}

.container::before,
.container > div {
  height: 150px;
  margin: 5px;
}

.container > div:not(:first-child) {
  background: lightgray;
}

.container .right_corner {
  position: relative;
  order: 1;
}

.container::before {
  content: '';
  order: 3;
}

.container > div:nth-child(n+2)::before {
  counter-increment: num;
  content: counter(num);
}

@media (max-width: 800px){
  .container > div:nth-child(n+4) {
    order: 2;
  }
  .container > div:nth-child(n+6) {
    order: 4;
  }
  .container > div:not(:first-child) {
    width: calc((100% / 4) - 10px);
  }
  .container .right_corner {
    width: calc((100% / 2) - 10px);
  }
  .container::before {
    width: calc((100% / 2) - 10px);
  } 
}

@media (min-width: 801px) and (max-width: 1000px){
  .container > div:nth-child(n+5) {
    order: 2;
  }
  .container > div:nth-child(n+8) {
    order: 4;
  }
  .container > div:not(:first-child) {
    width: calc((100% / 5) - 10px);
  }
  .container .right_corner {
    width: calc((100% / 2.5) - 10px);
  }
  .container::before {
    width: calc((100% / 2.5) - 10px);
  } 
}

@media (min-width: 1000px) {
  .container > div:nth-child(n+6) {
    order: 2;
  }
  .container > div:nth-child(n+10) {
    order: 4;
  }
  .container > div:not(:first-child) {
    width: calc((100% / 6) - 10px);
  }
  .container .right_corner {
    width: calc((100% / 3) - 10px);
  }
  .container::before {
    width: calc((100% / 3) - 10px);
  }
}

<div class='container'>

  <div class='right_corner'>
    <div>
      <div></div>
    </div>
  </div>

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  
  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div></div>
  <div></div>

</div>

Answer 2

我对jsfiddle.net的尝试。它没有绝对定位和伪元素。

以下代码段中的代码相同：

body {
  background-color: black;  
}

.grid {
  display: flex;
  flex-flow: row wrap;
}

.grid > div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  width: calc(33.33% - 10px);
  margin: 5px;
  height: 60px;
  background-color: gainsboro;  
}

.red-box {
  box-sizing: border-box;
  width: calc(33.33% - 60px);
  margin: 30px 30px;
  height: 80px;
  margin-bottom: -70px; 
  order: 2!important;
  background-color: red;
  border: 2px solid gainsboro;      
}

.red-box > div {
  background-color: red;
  height: 60%;
  width: 60%;
  border: 2px solid gainsboro; 
}    

@media (max-width: 499px) {
  .grid > div:nth-child(-n+3) {
    order: 1;
  }
  .grid > div:nth-child(n+4) {
    order: 3;
  }      
  .grid>div:nth-child(5) {
    margin-right: calc(33.33% + 5px);
  }
}

@media (min-width: 500px) and (max-width: 999px) {
  .grid > div:nth-child(-n+4) {
    order: 1;
  }
  .grid > div:nth-child(n+5) {
    order: 3;
  } 
  
  .item {
    width: calc(25% - 10px);
   }
   .red-box {
    width: calc(25% - 60px);
   }
   .grid>div:nth-child(7) {
     margin-right: calc(25% + 5px);
   }
}

@media (min-width: 1000px) {
  .grid > div:nth-child(-n+5) {
    order: 1;
  }
  .grid > div:nth-child(n+6) {
    order: 3;
  } 
  
  .item {
    width: calc(20% - 10px);
   }
   .red-box {
    width: calc(20% - 60px);
   }
   .grid>div:nth-child(9) {
     margin-right: calc(20% + 5px);
   }
}

<div class="grid">
  <div class="red-box"></div>

  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>  
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
  <div class="item">Item 13</div>
  <div class="item">Item 14</div>
  <div class="item">Item 15</div>
  <div class="item">Item 16</div>
  <div class="item">Item 17</div>
  <div class="item">Item 18</div>
  <div class="item">Item 19</div>
  <div class="item">Item 20</div>
</div>