如何使用 CSS 控制元素的环绕以形成 L 形？ [已关闭]

Question

如何实现将元素包装成容器内的 L 形？这些元素沿着左侧向下放置。随着容器高度的缩小，更多的物品应该沿着底部水平放置。

换行后“剩余”的垂直空间如何处理？理想情况下，所有东西都与底部齐平，额外的空间可以在顶部。

需要这种类型的包装来包装横向屏幕中工具栏中的按钮。我已经向客户提出了其他替代方案，但他们想要这种方法。似乎没有一种方法可以使用 Flexbox 使其朝一个方向移动，然后朝另一个方向移动。此外，没有办法根据 Flexbox 中的项目是否在第一行来设置它们的样式，因为如果有的话，我可以为不在第一行的项目添加较大的边距以导致它们换行。

Answer 1

我使用浮动 DIV 来实现它，该 DIV 阻挡了右上角的空间。其他元素，如果它们是内联的，则被迫环绕它。我使用 CSS calc() 函数将浮动大小设置为容器大小减去项目大小。

.container {
  background: #8080dd;
  height: 300px;
  flex-flow: row wrap;
  position: relative;
}

/* Just an example item */
.item {
  border: 3px solid black;
  font: bold 20px sans-serif;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  display: inline-block;
  margin: 10px;
}

/* This is a floating item that blocks out the other items.
   It's size is calculated to be the width of the container
   minus some space for the items.
*/
.blocker {
  background: #80000030;
  border: 2px #800000;
  display: block;
  width: calc(100% - 80px);
  height: calc(100% - 80px);
  float: right;
}

<div class="container">
  <div class="blocker"></div>
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>