Question

我希望所有元素都具有相同的高度，并希望分隔符覆盖所有高度。请问我该如何实现？

分隔符为粉红色，您可以在此处看到height: 5em

.daddy {
  height: 10em;
  width: 10em;
}

.container {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid lightgrey;
}

.child1 {
  width: 3em;
  height: 10em;
  background-color: red;
}

.child2 {
  width: 3em;
  height: 15em;
  background-color: blue;
}

.separator {
  width: 10px;
  height: 5em;
  background-color: pink;
}

<div class="daddy">
  <div class="container">
    <div class="child1"></div>
    <div class="separator"></div>
    <div class="child2"></div>
  </div>
</div>

Answer 1

如果从容器中删除对齐项目，则所有三列都将增长以填充行

.daddy {
  height: 10em;
  width: 10em;
}

.container {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  border: 1px solid lightgrey;
  justify-content:center;
}

.child1 {
  width: 3em;
  background-color: red;
  height: 10em;         /* this is just to give it some height as no column currently has any height */
}

.child2 {
  width: 3em;
  background-color: blue;
}

.separator {
  width: 10px;
  background-color: pink;
}

<div class="daddy">
  <div class="container">
    <div class="child1">
    </div>

    <div class="separator">
    </div>

    <div class="child2">
    </div>
  </div>
</div>

支付弹性排和统一尺寸

1 个答案: