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扩展到完整视口宽度或Bootstrap容器边界，我不介意。 https://codepen.io/codecarson/pen/zEPXge

Answer 1

更改最后一项＆＃39; s 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;
  }
}

似乎是一种蛮力方法。或者你在寻找更聪明的东西吗？

将flexbox子项扩展为比容器更宽的全新行

1 个答案: