Flexbox行为违背了其理念

Question

我是这个话题的新手并且自己读到它。我参与了this指南。

在本指南中，他们说：

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.

我希望Flexbox使用所有可用空间，但显然在2下方有空的空间并且还有足够的空间用于元素3。 当我看一下Flexbox的理念时，我可以看到我的布局中没有使用但可用的空间。

我的css中出错了还是Flexbox坏了？

布局/输出的

CSS

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  align-items: flex-start;

  -webkit-flex-flow: wrap;
}

.flex-item {
  background: tomato;
  padding: 5px;
  width: 300px;
  margin-top: 10px;

  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

HTML 的

<ul class="flex-container">
  <li class="flex-item">1111111111 1111111111</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
</ul>

Answer 1

Flexbox主要是一维布局模式。它可以让你分发＆amp;尺寸元素相应地，仅在一个轴（水平或垂直），然后它支持在另一个轴上的基本对齐/拉伸。

flex-wrap: wrap可以让它看起来二维，但实际上它只是让你将你的flex项分成“行”，其中每个“行”就像一维的flexbox 。并且线条不重叠（或者根本不相互作用）。

因此，在你的图中，“3”元素不会填充空白区域，因为它位于空白空间所在的单独弹性线中，并且弹性线不能重叠。

要在纯CSS中实现您想要的功能，我认为您需要CSS Grid，特别是grid-auto-flow: dense。尽管如此，该规范仍在积极开发中，并且浏览器的实现水平各不相同，因此尚未准备好在生产网站中使用。

Answer 2

是的，你的CSS有点错误

JSFiddle Demo

<强> CSS

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  flex-wrap: wrap; /* here */
}

.flex-item {

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  background: tomato;
  padding: 5px;
  width:300px;
  margin-top: 10px;

  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

然而，在进一步的讨论中，您似乎无法通过flexbox实现您的目标（AFAIK）。

  

我希望元素3移动到2以下，所以使用了所有空白

因此，我认为像Masonry.Js这样的JS解决方案将是推荐的解决方案。