html - CSS 3 行，第一行固定大小，最后一行固定大小，居中休息

Question

我想放 3 行 1-第一个有固定的高度 2- second 具有灵活的剩余尺寸但问题是第三行，因为它在某些情况下发现并且我希望在所有情况下第二个都采用剩余尺寸 3- third if founded 采取固定高度

仅供引用:容器行具有固定高度

.container
{
  height: 300px;
  display: flex;
  flex-direction: column;
}

.row-1
{
  height: 50px;
}

.row-2
{
}

.row-3
{
  height: 50px; 
}

Answer 1

如果你对使用 flex 没问题，可以这样实现:

.container
{
  height: 200px;
  display: flex;
  flex-direction: column;
}

.firstRow
{
  height: 50px;
  background-color: blue;
}

.secondRow
{
  background-color: red;
  flex: 1;
}

.thirdRow
{
  height: 30px;
  background-color: yellow;
}

<div class="container">
  <div class="firstRow"></div>
  <div class="secondRow"></div>
  <div class="thirdRow"></div>
</div>