如何使用 bootstrap 4 d-flex 使任何元素覆盖总面积的其余部分？

Question

现在可以使用 bootstrap d-flex 轻松创建此结构。我应该如何创建像第二张图片那样的区域？

Answer 1

你需要把flex-grow:1应用到中间的div上，这样才能占据剩下的space

.bd-highlight {
  background-color: rgba(86, 61, 124, .15);
  border: 1px solid rgba(86, 61, 124, .15);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex align-items-start flex-column bd-highlight" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight" style="flex-grow:1;">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

如何使用 bootstrap 4 d-flex 使任何元素覆盖总面积的其余部分？

How to make any element cover rest of the total area using bootstrap 4 d-flex?

html

css

flexbox

twitter-bootstrap-4