时间戳

首页 > 解决方案 > 如何使用弹性框显示等高的列

css - 如何使用弹性框显示等高的列

问题描述

你能告诉我如何使用 . 显示等高的列吗？flex-box我试过这样

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .grid {
    display: flex;
    flex-wrap: wrap;
  }
  .card {
    background-color: #eee;
    padding: 20px;
  }
  .grid-item {
    width: calc(50vw - 0px);
  }

这是我的代码 https://codesandbox.io/s/prod-sea-ng305?file=/index.html:255-550 在此处输入图像描述

目前它看起来像这样

标签： cssflexbox

解决方案

为了保持 div 的高度相等，我们必须使用align-items: stretch属性。这将保持元素的高度。请在下面找到代码。

* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .grid {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
      }
      .grid-item {
        display: flex;
        width: calc(50vw - 0px);
        margin: 0 0 1px 0;
      }
      .card {
        width: 100%;
        background-color: #eee;
        padding: 20px;
      }
<div class="grid">
      <div class="grid-item">
        <div class="card">A very short text.</div>
      </div>
      <div class="grid-item">
        <div class="card">
          Debitis nam, porro officia dolorum cupiditate magnam perspiciatis quis
          corrupti cumque, est perferendis provident vel accusamus ullam cum
          similique. Quasi, quidem beatae. Debitis nam, porro officia dolorum
          cupiditate magnam perspiciatis quis corrupti cumque, est perferendis
          provident vel accusamus ullam cum similique. Quasi, quidem beatae.
        </div>
      </div>
      <div class="grid-item">
        <div class="card">
          Officia autem sunt obcaecati voluptas sit, architecto cumque quaerat
          aperiam fuga eveniet necessitatibus aliquid eum beatae, mollitia saepe
          ab ut!
        </div>
      </div>
    </div>

推荐阅读