Question

我希望左侧的元素分布在容器的整个高度上，以占总高度的100％。

我该怎么办？

注意：“项目”是动态数据

.item {
  border: 1px solid gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-6" style="border:1px solid red;">
    <div class="d-flex m-0">
      <div class="item">
        item
      </div>
    </div>
    <div class="d-flex m-0">
      <div class="item">
        item
      </div>
    </div>
  </div>
  <div class="col-6" style="border:1px solid red;">
    <div class="d-flex m-0">
      <div class="flex-center">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis libero incidunt rem nisi delectus aliquam maiores hic doloremque aliquid aut! Vitae ex architecto deserunt minima inventore ratione similique ipsa? Facere.
      </div>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto enim officia itaque, quaerat quisquam deserunt, omnis quae, quas quod maxime at impedit ducimus vel aspernatur. Commodi unde amet itaque alias.
      </div>
    </div>
  </div>
</div>

View on JSFiddle

Answer 1

您可以使用flex-direction: column，如下所示：

.left-column {
  display: flex;
  flex-direction: column;
}

.d-flex{
  border: 1px solid gray;
  flex: 1;
}

如果您希望垂直对齐项目，则可以添加以下内容：

.d-flex {
   ...
   align-items: center;

}

See it on this fiddle

Answer 2

因此，首先，您需要在行上使用no-gutters类来限制cols之间的装订线。然后，在col内的flexbox元素上需要h-50（以使其分别达到50％的高度），而在flexbox子元素上则需要w-100（以使其填充空间）。对于item内部的垂直居中，只需添加d-flex align-items-center类。

我创建了您的提琴的更新版本： https://jsfiddle.net/4vep1gy0/

.item {
  border: 1px solid gray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="row no-gutters">
  <div class="col-6" style="border:1px solid red;">
    <div class="d-flex m-0 h-50">
      <div class="item w-100 d-flex align-items-center">
        item
      </div>
    </div>
    <div class="d-flex m-0 h-50">
      <div class="item w-100 d-flex align-items-center">
        item
      </div>
    </div>
  </div>
  <div class="col-6" style="border:1px solid red;">
    <div class="d-flex m-0">
      <div class="flex-center">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis libero incidunt rem nisi delectus aliquam maiores hic doloremque aliquid aut! Vitae ex architecto deserunt minima inventore ratione similique ipsa? Facere.
      </div>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto enim officia itaque, quaerat quisquam deserunt, omnis quae, quas quod maxime at impedit ducimus vel aspernatur. Commodi unde amet itaque alias.
      </div>
    </div>
  </div>
</div>

如何使flexbox元素划分容器的总高度？

2 个答案: