同一行上的 css 网格或 flexbox 等高子项答案

【问题标题】：css grid or flexbox equal height children on same row同一行上的 css 网格或 flexbox 等高子项
【发布时间】：2020-12-09 16:23:54
【问题描述】：

我正在构建一个响应式着陆页，当全宽时有 2 个需要匹配高度的框，即拉伸到最高。在全宽范围内，这些框需要彼此并排放置，我可以使用 css 网格或 flex 框，因为它们位于同一行。

当在移动尺寸的屏幕中，盒子需要相互包裹，但高度仍然匹配，这是我目前所拥有的。

    <div class="welcome-wrapper">
   <div class="mt-4 v-card v-sheet theme--light">
      <div class="v-card__text text-center">
         <p class="headline font-weight-regular text-center my-3">First Action Box</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
         <button type="button" class="font-weight-bold v-btn v-btn--depressed v-btn--rounded theme--light v-size--x-large success" data-v-step="7"><span class="v-btn__content">Do Action One</span></button>
      </div>
   </div>
   <div class="mt-4 v-card v-sheet theme--light">
      <div class="v-card__text text-center">
         <p class="headline font-weight-regular text-center my-3">Second Action Box</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie interdum nulla, non rhoncus dolor fringilla vel. Sed eu tellus mollis, auctor sem sed, bibendum purus. Cras eget urna viverra, dapibus urna sed, eleifend massa..</p>
         <button type="button" class="font-weight-bold v-btn v-btn--depressed v-btn--rounded theme--light v-size--x-large" style="background-color: rgb(72, 164, 201); border-color: rgb(72, 164, 201);"><span class="v-btn__content">Do action two</span></button>
      </div>
   </div>
</div>


    .welcome-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    /* flex-wrap: wrap; */
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    flex-direction: row;
    justify-content: space-between;
}

.welcome-wrapper .v-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    flex-basis: 100%;
}

.welcome-wrapper .v-card .v-card__text {
    height: 100%;
    width: 100%;
}

任何人有任何关于当元素实际上不在一行时如何匹配元素高度的建议？

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

忽略引导类，就这样吧。

.welcome-wrapper {
  display: flex;
  flex-direction: column;
}

@media(min-width:768px) {
  .welcome-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
}

.welcome-wrapper .v-card {
  background-color: #333;
  color: #f0f0f0;
  border: 0.05rem solid #eee;
  flex: 1 1 0;
  padding: 2rem;
}

<div class="welcome-wrapper">
  <div class="v-card">
    <div>
      <p>First Action Box</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <button>
        Do Action One
      </button>
    </div>
  </div>
  <div class="v-card">
    <div>
      <p>Second Action Box</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie interdum nulla, non rhoncus dolor fringilla vel. Sed eu tellus mollis, auctor sem sed, bibendum purus. Cras eget urna viverra, dapibus urna sed, eleifend massa..</p>
      <button>
        Do Action One
      </button>
    </div>
  </div>
</div>

【讨论】：