Flexbox或Column CSS，用于定位这样的元素 [英] Flexbox or Column CSS for positioning elements like this

问题描述

是否有任何解决方案来避免浮动并使用flexbox并使这种类型的布局像我的表示形式一样? 我没有任何例子，但是这张照片满足了我的需求.

Is there any solution to avoid the float and to use flexbox and make this type of layout like in my representation? I don't have any example but this picture with what I need.

我将尝试用语言解释:

• 此网格从1025px开始，带有2列，右侧有一个大红色正方形.
• 从1100px开始，我需要3列，并在右边有一个大红色正方形
• 从1680px开始，我将有4列，并在右侧有一个大红色正方形.

 

1. 物品的位置必须与我的照片一样
2. 根据长宽比，其他项将下降4个:5、6、7、8会下降，9、10等.
3. 大红色必须与前两行始终具有相同的高度.
4. 所有布局都是流畅且响应迅速的

我可以使用FLOAT和一些JS轻松地计算出前两行的高度完全相同，并使大红色具有相同的高度，但是如果可能的话，我想使用flexbox.

I can make this very easy with FLOAT and some JS to calculate the exact same height of the first two rows and make the big red have the same but I want to use flexbox if its possible.

我到目前为止的代码

.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>

推荐答案

如果将Flexbox与绝对位置结合使用，就可以实现.

If you combine Flexbox with absolute position, you can accomplish that.

我所做的是利用order属性将 red 元素放置在右上角.这样一来，便可以使用媒体查询来控制其位置.

What I did was to make use of the order property to position the red element in the upper right corner. With this one can then control its position using media queries.

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

To force a wrap on the end of the 2nd row, I used a pseudo element with the same size as the right_corner element, and use the order property to position it.

为了使 red 元素居中，我使用了绝对定位的包装器和Flexbox，它们的高度将是其两倍，并覆盖2行.

To center the red element I use an absolute positioned wrapper and Flexbox, that will take twice its height, and by that cover 2 rows.

堆栈片段

.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>

这篇关于Flexbox或Column CSS，用于定位这样的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！