CSS-当块不能全部放在一行中时，将块包装到一列

假设容器中有这些块：

$| Luke Skywalker | Princess Leia | Chewbacca |     $

美元符号（

$

）标记容器的宽度。管道标志（

|

）标记每个块的宽度

现在我缩小了容器（可能是因为用户缩小了浏览器窗口），它的宽度不再足以容纳同一行上的所有3个块。一个基于flexbox的天真实现（

display:flex；flex direction:row；flex wrap:wrap；

）给出了以下信息：

$   | Luke Skywalker | Princess Leia |   $
$              | Chewbacca |             $

但这对我来说太难看了。我宁愿得到这个：

$           | Luke Skywalker |           $
$           | Princess Leia |            $
$             | Chewbacca |              $

有没有一种方法可以使用纯CSS实现这种效果

请注意，这些块是动态生成的。我事先不知道将出现的块的总数或每个块的内容。

使用此选项

<div class="container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>
<style>

.block {
  display: inline-block;
  width: 33%;
}

/* Clearfix (clear floats) */
.block::after {
  content: '';
  clear: both;
  display: table;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .block {
    width: 100%;
  }
}
</style>

.街区{
显示：内联块；
宽度：33%；
}
/*Clearfix（清除浮动）*/
.block：：之后{
内容：''；
明确：两者皆有；
显示：表格；
}
/*响应式布局-使三列堆叠在彼此的顶部，而不是相邻*/
@媒体屏幕和屏幕（最大宽度：500px）{
.街区{
宽度：100%；
}
}

.flex-box{最大宽度：800px；边距：0自动；显示：flex；框大小：边框框；对齐内容：周围空格；flex-wrap:wrap；}
.flex-box.flex-list{
背景：#000；
高度：50px；
宽度：150px；
边缘顶部：10px；
}
使用此bro

yes:media query您可以共享代码吗？您可以使用

width:calc（100%/3）

代替硬编码宽度。