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

Question

是否有任何解决方案可以避免浮动并使用 flexbox 并使这种类型的布局像我的表示一样？ 我没有任何例子，但这张照片是我需要的。

我会尽量用文字来解释：

• 这个网格从 1025 像素开始，有 2 列，右侧有一个大红色方块。
• 从 1100 像素开始，我需要 3 列和右侧的大红色方块
• 从 1680 像素开始，我将有 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 属性将red 元素定位在右上角。有了这个，就可以使用媒体查询来控制它的位置。

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

为了使 red 元素居中，我使用了一个绝对定位的包装器和 Flexbox，这将占据其高度的两倍，并且覆盖 2 行。

堆栈sn-p

.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

我对@9​​87654321@ 的尝试。 它没有绝对定位和伪元素。

下面的sn-p中也有同样的代码：

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>