css - 将 flexbox child 扩展到比容器宽的新行

Question

我正在使用 Bootstrap 4 创建一个投资组合部分并学习 flexbox。每个投资组合元素最初都包含一个缩略图，单击该缩略图会展开/折叠更多详细信息。

在全宽下，元素以每行 4 列的形式排列。我可以使用 flexbox 获取详细描述 (pabout) 以在当前行下方展开并全宽显示吗？即在移动设备上，元素将位于 1 列中，单击一个元素将展开所单击元素下方的描述。在较大的宽度下，描述将在全宽的行下方展开(以形成新行)。

寻找扩展行的 CSS。我可以管理 JS。

<section id="test" class="container">
    <div class="flex-container">
        <div class="pitem">             
            <div class="pcard">
                <p>Title 1</p>
            </div>
            <div class="pabout">
                Detailed description goes here
            </div>
        </div>
        <div class="pitem">             
            <div class="pcard">
                <p>Title 2</p>
            </div>
            <div class="pabout collapse">
                Detailed description goes here
            </div>
        </div>
        <div class="pitem">             
            <div class="pcard">
                <p>Title 3</p>
            </div>
            <div class="pabout collapse">
                Detailed description goes here
            </div>
        </div>
        <div class="pitem">             
            <div class="pcard">
                <p>Title 4</p>
            </div>
            <div class="pabout collapse">
                Detailed description goes here
            </div>
        </div>
    </div>
</section>

更新:这是我正在使用的一些 CSS/HTML。我不介意描述 div 是否扩展到整个视口(viewport)宽度或 Bootstrap 容器边界。 https://codepen.io/codecarson/pen/zEPXge

Answer 1

改变最后一项的 flex-grow :

.flex-item {
  background: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;

 //This change
  &:last-child{
     flex-grow: 5;
  }
}

似乎可以作为蛮力方法。或者您正在寻找更智能的东西？