如何设置弹性盒子的行高？

Question

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

.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>

如果要为后代添加高度，请使用heightor 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>