时间戳

首页 > 解决方案 > 同一行上的 css 网格或 flexbox 等高子项

html - 同一行上的 css 网格或 flexbox 等高子项

问题描述

我正在构建一个响应式登陆页面，当全宽时有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%;
}

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

标签： htmlcssflexboxcss-grid

解决方案

忽略引导类，就这样。

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

推荐阅读