html - 如何自动调整行大小以适应CSS中的容器？

Question

请参阅下面的代码。如何将内盒分成六等高的行？我知道可以使用 grid-template-columns:repeat(auto-fit,minmax(,)

在 display: grid 中的列来实现类似的效果

* {
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.outerbox {
  display: flex;
  align-items: center;
  height: 100vh;
}

.innerbox {
  width: 40vh;
  height: 40vh;
  background-color: #ced9d5;
  margin: 0 auto;
}

.item div {
  width: 40vh;
  height: 10px;
  border: 1px solid black;
}

<div class="outerbox">
  <div class="innerbox">
    <div class="item">
      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
      <div class="item04"></div>
      <div class="item05"></div>
      <div class="item06"></div>
    </div>
  </div>
</div>

Answer 1

您可以在容器上使用 display:flex 和 flex-direction:column，并使用 flex: 1 0 拉伸(stretch)元素以填充可用空间自动 元素。

* {
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.outerbox {
    display: flex;
    align-items: center;
    height: 100vh;
}

.innerbox {
    width: 40vh;
    height: 40vh;
    background-color: #ced9d5;
    margin: 0 auto;
}

.item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.item div {
    width: 100%;
    flex: 1 0 auto;
    border: 1px solid black;
}

<div class="outerbox">

  <div class="innerbox">
    <div class="item">

      <div class="item01"></div>
      <div class="item02"></div>
      <div class="item03"></div>
      <div class="item04"></div>
      <div class="item05"></div>
      <div class="item06"></div>

    </div>
  </div>

</div>