html - 如何在 flexbox 中设置行高？

Question

如何在 flex 中增加一行的高度(包含的 div 具有类“行”)？我有一行两列。

.body2 {
  display: flex;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
  background-color: green;
  height: 100px;
}

<section class="body2">

  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>

</section>

如何增加该行的高度？我已经尝试过 height:something in .row 但它不起作用

Answer 1

如果您在容器上设置高度，该高度将应用到容器，但不一定应用到容器的内容，因此看起来您可能没有添加高度。

在这个例子中，一个高度被添加到容器中，如红色边框所示:

.body2 {
  display: flex;
}

.row {
  display: flex;
  flex: 1;
  height: 150px;
  border: 1px dashed red;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: aqua;
  height: 100px;
}

.green-column {
  background-color: lightgreen;
  height: 100px;
}

<section class="body2">
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</section>

如果要为后代添加高度，请使用 height 或 flex-basis(因为嵌套的 flex 容器是在列方向上)。

.body2 {
  display: flex;
}

.row {
  display: flex;
  flex: 1;
  height: 150px;
  border: 1px dashed red;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: aqua;
  height: 75px;
}

.green-column {
  background-color: lightgreen;
  flex-basis: 125px;
}

<section class="body2">
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</section>

如果您希望后代占据全高，请使用 flex: 1 而不是显式高度。

.body2 {
  display: flex;
}

.row {
  display: flex;
  flex: 1;
  height: 150px;
  border: 1px dashed red;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: aqua;
  /* height: 75px; */
  flex: 1;
}

.green-column {
  background-color: lightgreen;
  /* flex-basis: 125px; */
  flex: 1;
}

<section class="body2">
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        Some Text in Column One
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        Some Text in Column Two
      </div>
    </div>
  </div>
</section>