如何混合网格和弯曲并生长弯曲元素之一？

Question

我的家庭仪表板由独立的组件组成。内部的组件本身具有不同的性质：某些组件由CSS网格管理，某些组件由CSS Flexbox管理，某些组件是默认块。

我想强行安排这些组件的排列，以便它们堆叠在一起，并且其中一个占据所有可用空间。

到目前为止的设计

到目前为止，我在最外部的元素（通用应用程序容器）上有一个justify-content: space-around;，并且组件按预期进行了对齐：

.border {
  margin: 2px;
  border-style: dashed;
  border-width: 2px;
}

.boxofelements {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 200px;
}

.element {
  width: 50px;
}

.bigbox {
  display: flex;
  flex-direction: column;
  height: 200px;
  justify-content: space-around;
}

<div class="bigbox border">
  <div class="boxofelements border">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>

  <div class="boxofelements border">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>

  <div class="boxofelements border">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>
</div>

我想进行的更改

然后我想更改堆栈，并让中间框占用其下方的所有可用空间。类似于

为此，我删除了justify-content: space-around;元素并尝试强制grow中间元素：

.border {
  margin: 2px;
  border-style: dashed;
  border-width: 2px;
}

.boxofelements {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 200px;
}

.element {
  width: 50px;
}

.bigbox {
  display: flex;
  flex-direction: column;
  height: 200px;
  /* no more space around
    justify-content: space-around;
  */
}

<div class="bigbox border">
  <div class="boxofelements border">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>

  <div class="boxofelements border" style="grow: 1">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>

  <div class="boxofelements border">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>
</div>

而且，什么都没发生。

正确的咒语是说“使它使元素占据轴上边界之后的所有可用空间”（在我的情况下是“下”，并且意味着如果轴在行上，则在“右侧”

Answer 1

也许您正在寻找flex-grow。

.border {
  margin: 2px;
  border-style: dashed;
  border-width: 2px;
}

.boxofelements {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 200px;
}

.element {
  width: 50px;
}

.bigbox {
  display: flex;
  flex-direction: column;
  height: 200px;
  /* no more space around
    justify-content: space-around;
  */
}

<div class="bigbox border">
  <div class="boxofelements border">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>

  <div class="boxofelements border" style="flex-grow: 1;">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>

  <div class="boxofelements border">
    <div class="element border">one</div>
    <div class="element border">two</div>
    <div class="element border">three</div>
  </div>
</div>