如何让浮动项平均分割空白区域？答案

【问题标题】：How to Let Float Items Split the Blank Area in Average?如何让浮动项平均分割空白区域？
【发布时间】：2019-06-12 12:12:45
【问题描述】：

请运行此演示：

.app {
  background:pink;
  width: 90vw;
  overflow: hidden;
}
.app__item {
  background: lightblue;
  width: 200px;
  float :left;
  margin:5px;
  height: 40px;
}
.app__item:last-child {
  float: right;
}
.app__item--size2 {
  height: 90px;
}

<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class="app__item">2</div>
  <div class="app__item">3</div>
  <div class="app__item">4</div>
  <div class="app__item">5</div>
  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">9</div>
  <div class="app__item">10</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>

请注意我想要的红色文字：

如何让浮动项平均分割空白区域？

这个 gif 指出了我想要什么以及我使用浮动布局的原因。

如果使用flex，结果会是

.app {
  background:pink;
  width: 80vw;
  display: flex;
  flex-flow: row wrap;
}
.app__item,
.app__item_wrapper {
    margin:5px;    
  width: 200px;
  flex: 0 0 auto;
}
.app__item {
  background: lightblue;
  height: 40px;
}
.app__item_wrapper {
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.app__item--size2 {
  height: 90px;
}
.app__item--inner {
  margin:0;
  flex: 0 0 auto;
}

<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class=" app__item_wrapper app__item--size2">
    <div class="app__item app__item--inner">2</div>
    <div class="app__item app__item--inner">3</div>
  </div>
  <div class=" app__item_wrapper app__item--size2">
    <div class="app__item app__item--inner">4</div>
    <div class="app__item app__item--inner">5</div>
  </div>

  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>

缺点是当视口改变时它不能很好地工作。看到这个：

这是骗局：

【问题讨论】：

为什么投反对票？请告诉我，以便我改进问题。

标签： javascript html css grid css-float

【解决方案1】：

如果我理解正确，您希望“单元格 1”右侧的单元格拉伸以填充封闭 div 的铰接水平空间（粉红色背景）。

您可以使用CSS Grid 来实现这一点，如下所示：

.app {
  background:pink;
  width: 90vw;
  padding:5px;
  
  display:grid;
  
  /* Cause first column with to be 200px, remaining two columns
  to scale to fit remaining width */
  grid-template-columns: 200px repeat(2, 1fr);
  
  /* Set spacing between cells */
  grid-gap:10px;
}
.app__item {
  
  background: lightblue;
  width: 100%;
  height: 40px;
} 
.app__item--size2 {
  /* Cause top left cell to occupy two rows */
  grid-row: 1 / 3;
  height:100%;
}

<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class="app__item">2</div>
  <div class="app__item">3</div>
  <div class="app__item">4</div>
  <div class="app__item">5</div>
  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">9</div>
  <div class="app__item">10</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>

【讨论】：

【解决方案2】：

感谢@Dacre Denny 给了我灵感。终于，我明白了。

.app {
  background:pink;
  width: 90vw;
  padding:5px;
  
  display:grid;
  grid-template-columns: repeat(auto-fit,200px);
  justify-content:space-evenly;
  grid-gap: 5px;
}
.app__item {  
  background: lightblue;
  width: 200px;
  height: 40px;
} 
.app__item--size2 {
  /* Cause top left cell to occupy two rows */
  grid-row: 1 / 3;
  height:100%;
}
.app__item:last-child {
  grid-column-end: -1
}

<div class="app">
  <div class="app__item app__item--size2">1</div>
  <div class="app__item">2</div>
  <div class="app__item">3</div>
  <div class="app__item">4</div>
  <div class="app__item">5</div>
  <div class="app__item">6</div>
  <div class="app__item">7</div>
  <div class="app__item">8</div>
  <div class="app__item">9</div>
  <div class="app__item">10</div>
  <div class="app__item">
    <button>search</button>
  </div>
</div>

当视口改变时查看这个 gif。

【讨论】：