Question

我有一个容器，随机数量的元素应始终对齐左侧。容器宽度可以增加或减少。

如果容器大小增加，那么行+ 1中的第一个元素应该返回一行，并且应该出现在右侧。但是如果左侧和右侧有填充物，它应该只返回一行。

虽然元素没有空行一行，但元素之间的空间应该增长，直到第+行中的元素可以放入此行。

相同的功能也应该以相反的方式工作。

这是我的代码：

＆＃13;

class RealStrategy(Thread):
.....
.....
    def run_engine(self):
        self.on_start()
        self._order_handler.start()
        self._data_parser.start()
        self._data_source.start()
        self.start()

    def stop_engine(self):
        self._data_source.stop()
        self._data_parser.stop()
        self._order_handler.stop()

        self._data_source.join()
        self._data_parser.join()
        self._order_handler.join()

        self.stop()

＆＃13;

.container {
  min-height: 400px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  align-content: flex-start;
}

.container:after {
  display: block;
  content: " invisible node ";
  flex(999 999 auto);
}

.item {
  flex: 0 0 auto;
  margin: 5px;
  width: 50px;
  height: 50px;
  background-color: green;
}

＆＃13;

https://jsfiddle.net/p6k537ep/

我的问题是，在第二行中，元素之间的空格与第一行中的空格不同（它取决于有多少元素）。

修改

但是，如果它们有足够的空间，那么第二行的元素只能移动一行。 Gap在第一行中以正确的方式增长，但在第二行中没有增长。

Answer 1

AFAIK，如果没有添加不可见的非语义辅助元素来保存最后一行的水平节奏（宽度和水平边距与.item相同但高度为零），则无法在Flexbox中解决此问题。< / p>

然而，这在CSS Grid中很容易解决，这似乎是完美的：

.container {
  min-height: 400px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 60px);
  justify-content: space-around;
  align-items: center;
  align-content: start;
}

.item {
  flex: 0 0 auto;
  margin: 5px;
  width: 50px;
  height: 50px;
  background-color: green;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

使用类似的伪元素hack和内联格式的一些“魔力”，

和种类可以使用内联块解决：

.container {
  min-height: 400px;
  text-align: justify;
  font-size: 5px;
  line-height: 0;
}

.container:after {
  display: inline; /* it's important, it should continue the same line! */
  /* each character below acts as an invisible placeholder for the item */
  /* with em dashes, they would be 1em (5px here) wide each */
  content: '— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — ';
  letter-spacing: 55px; /* expand each placeholder to the item width */
  word-spacing: -56px; /* collapse the whitespaces */
  margin-left: 5px;
}

.item {
  display: inline-block;
  margin: 5px;
  width: 50px;
  height: 50px;
  background-color: green;
  vertical-align: top;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

但是，老实说，我不建议在生产中使用第二个选项。对于不支持Grid的浏览器，左对齐项目可能是更好的后备。

Answer 2

您可以使用margin伪元素上的:after属性将块保持在一起。

fiddle

.container {
  min-height: 400px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  align-content: flex-start;
}

.container:after {
  display: block;
  content: " ";
  margin-left: auto; /* added */
}

.item {
  flex: 0 0 auto;
  margin: 5px;
  width: 50px;
  height: 50px;
  background-color: green;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

响应式布局，每行的间隙相同

2 个答案: