方向为行时，如何删除FlexBox子级中的高度？

Question

背景

首先，我想通过line-height中的FlexBox缩小两行文本之间的间距，但是line-height无法在flex-direction:row上使用，它除非我将方向更改为 column

，否则它将始终填充高度本身

问题

当方向像列一样行时，如何删除flexbox子级中的填充高度，或者某些文章解释了行和列填充高度的不同策略

我曾经尝试使用align-item: center，但它无法正常工作，您可以看到我的代码段，但它仍然具有高度。

.container {
  width : 200px;
  height : 200px;
  display : inline-flex;  
  flex-wrap : wrap;
}

.container_row {
  flex-direction : row;
}
.box {
  width : 100%;
  background-color : red;
}

.container_column {
  flex-direction : column;
}

.container_align_center {
  align-items : center;
}
}

<h2>row</h2>

<div class="container container_row">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
</div>

<br/>

<h2>row with align center<h2>

<div class="container container_row container_align_center">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
</div>

<br/>

<h2> column </h2>

<div class="container container_column">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
</div>

Answer 1

弹性容器中的初始设置为align-content: stretch。

这意味着cross-axis中容器的可用空间将在弹性项目之间平均分配。

结果，在行方向容器中，项目将垂直扩展，消耗所有可用高度。

您可以使用flex-start，flex-end，center或其他可能的值来覆盖此默认设置。

.container {
  width: 200px;
  height: 200px;
  display: inline-flex;
  flex-wrap: wrap;
}

.container_row {
  flex-direction: row;
  align-content: flex-start; /* NEW */
}

.box {
  width: 100%;
  background-color: red;
}

.container_column {
  flex-direction: column;
}

<div class="container container_row">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
</div>

<div class="container container_column">
  <div class="box">Box1</div>
  <div class="box">Box2</div>
  <div class="box">Box3</div>
</div>