1
使用flexbox，並基於以下標記，是否有可能讓列表中的最後一個項目在視覺上向上移動並將其自身「打包」到可用空間中？flexbox可以用來「包裝」列表中的物品嗎？
我知道這可以通過使用浮動或flexbox的不同標記（每列中的3列和項目）來完成，但我很好奇這是flexbox可以用這個標記做些什麼。
html,
body {
\t height: 100%;
}
html {
\t box-sizing: border-box;
}
*,
*:before,
*:after {
\t box-sizing: inherit;
}
ul {
\t list-style: none;
\t margin: 0;
\t padding: 0;
}
.layout {
\t background-color: yellow;
\t display: flex;
\t flex-flow: row wrap;
\t align-items: flex-start;
}
.layout__item {
\t background-color: red;
\t width: 33.33%;
\t padding-right: 15px;
}
/* Every 3rd item. */
.layout__item:nth-child(3n) {
\t padding-right: 0;
}
/* Every item after the first 3. */
.layout__item:nth-child(n+4) {
\t padding-top: 15px;
}
.layout__item-content {
\t background-color: green;
\t height: 100%;
}
.layout__item-img {
\t background-color: blue;
\t height: 100%;
}<ul class="layout">
\t <li class="layout__item">
\t \t <div class="layout__item-content">
\t \t \t <div class="layout__item-img" style="height:300px"></div>
\t \t \t <div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quos voluptates impedit optio id, fugit, nobis assumenda eveniet, veniam deserunt eum magni. Voluptates quam, deserunt sit pariatur ducimus omnis eligendi!</div>
\t \t </div>
\t </li>
\t <li class="layout__item">
\t \t <div class="layout__item-content">
\t \t \t <div class="layout__item-img" style="height:100px"></div>
\t \t \t <div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, saepe!</div>
\t \t </div>
\t </li>
\t <li class="layout__item">
\t \t <div class="layout__item-content">
\t \t \t <div class="layout__item-img" style="height: 200px;"></div>
\t \t \t <div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia placeat quidem, illum cumque nisi repellat excepturi iusto aperiam tempore quam.</div>
\t \t </div>
\t </li>
\t <li class="layout__item">
\t \t <div class="layout__item-content">
\t \t \t <div class="layout__item-img" style="height:150px;"></div>
\t \t \t <div class="layout__item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas natus odio quae nam officia libero.</div>
\t \t </div>
\t </li>
\t <li class="layout__item">
\t \t <div class="layout__item-content">
\t \t \t <div class="layout__item-img" style="height: 321px;"></div>
\t \t \t <div class="layout__item-text">Lorem ipsum dolor sit amet.</div>
\t \t </div>
\t </li>
</ul>
不能以'彎曲方向：row'。 – Oriol
你的意思是摺疊只有最後一個列表項目 - 所有其他人保持在其指定的高度？ – markE
@markE我的意思是最後一項填充第二列中的空白區域，基本上是磚石佈局。 –