如何消除两行弹性项之间的巨大不必要的余量？

Question

＆＃13;

＆＃13;

html, body {
  height: 100%;
}

.flex{
  min-height: 100%;
 display: flex;
 justify-content:center;
 flex-flow: row wrap;
 align-items: center;
  
 background: red;
}
  
.coloring {
  background:#CCC;
  border-radius:7px;
  padding: 20px;
  margin: 0px;
}

.Projects{
  order: 1;
  flex: 0 1 100%;
}

.Tribute{
  order: 2;
  flex: 1 1;
}

.Portfolio{
  order: 3;
  flex: 1 1;
}

＆＃13;

<section class="flex">

   <div class="coloring Projects">Projects</div>
   <div class="coloring Tribute">Tribute</div>
   <div class="coloring Portfolio">Portfolio</div>

</section>

＆＃13;

＆＃13;

＆＃13;

缩小屏幕时，将会有3行，现在有2个如此巨大的不必要的边距。我不知道该怎么办。如果我删除了align-items: center，那么这些框将填满整个页面，但这不是我想要的。

Answer 1

在多个弹性线之间对齐由align-content属性处理 - 尝试align-content: center以消除边距 - 见下面的演示：

html,
body {
  height: 100%;
}
.flex {
  min-height: 100%;
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
  align-items: center;
  align-content: center;
  background: red;
}
.coloring {
  background: #CCC;
  border-radius: 7px;
  padding: 20px;
  margin: 0px;
}
.Projects {
  order: 1;
  flex: 0 1 100%;
}
.Tribute {
  order: 2;
  flex: 1 1;
}
.Portfolio {
  order: 3;
  flex: 1 1;
}

<section class="flex">
  <div class="coloring Projects">Projects</div>
  <div class="coloring Tribute">Tribute</div>
  <div class="coloring Portfolio">Portfolio</div>
</section>

Answer 2

只有你必须删除

.flex类的最小高度