Question

我玩过响应式的flexbox网格，没有媒体查询。

http://jsbin.com/qurumisu/1（重新调整窗口以查看其工作原理）

它适合每行的柔性物品，并且可以平均拉伸它们的宽度以填充整条线。但是，这对“孤儿”项目没有帮助。如果第一条线适合5/6项，那么第二条线只剩下一条，这使得它比它的兄弟姐妹伸展得更宽。我希望通过将元素均匀地划分为所需的行数来避免这种行为。

这可能吗？

Answer 1

不，没有媒体查询调整弹性基础值。伸展和包裹的Flex项目尝试最大化每行适合的项目数量。

您可能需要考虑使用多列模块，它将尝试在所有创建的列中均等地分配元素：

.foo {
    columns: 100px;
}

http://caniuse.com/#feat=multicolumn

Answer 2

我一直在寻找完全相同的东西（在柔性包装物中排列图像缩略图）。你的样本给了我一些指示，我用它玩了一下，得出了以下内容：

好吧，如果您愿意为HTML代码添加一些额外的标记，那确实是可能的。假设我可以在全宽屏幕上显示n个项目，我在容器的末尾添加了n-1项<div class="hidden-item">并修改了CSS代码，以便这些隐藏的项目具有相同的宽度但没有高度。这样，它们也会缠绕，迫使最后一个项目缩小，而不会增加容器的高度。

结果在这里： http://output.jsbin.com/qaxatujaho/1

Answer 3

这是我为this question撰写的JavaScript解决方案：

var resize = function() {
  var container = document.querySelector('#container');
  var items = document.querySelectorAll('.item');
  var css = document.querySelector('#js-css');

  var itemWidth = 100;
  var containerWidth = $(container).width();

  var perRowCount = Math.floor(containerWidth / itemWidth);
  var rowCount = Math.ceil(items.length / perRowCount);
  var newPerRowCount = Math.floor(items.length / rowCount);

  var newItemWidth = (containerWidth / newPerRowCount) - (parseInt($(items[0]).css('margin')) * 2);

  css.innerHTML = '.item { width: ' + newItemWidth + 'px; }';
};

您可以在调整视口大小时运行resize()函数。

以下是一个示例:(或者JS Bin）

var resize = function() {
  var container = document.querySelector('#container');
  var items = document.querySelectorAll('.item');
  var css = document.querySelector('#js-css');

  var itemWidth = 100;
  var containerWidth = $(container).width();

  var perRowCount = Math.floor(containerWidth / itemWidth);
  var rowCount = Math.ceil(items.length / perRowCount);
  var newPerRowCount = Math.floor(items.length / rowCount);

  var newItemWidth = (containerWidth / newPerRowCount) - (parseInt($(items[0]).css('margin')) * 2);

  css.innerHTML = '.item { width: ' + newItemWidth + 'px; }';
};

var increase = function() {
  var container = document.querySelector('#container');

  $(container).width($(container).width() + 15);

  resize();
};

var decrease = function() {
  var container = document.querySelector('#container');

  $(container).width($(container).width() - 15);

  resize();
};

resize();

#container {
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  display: flex;
  -webkit-justify-content: space-around;
  -ms-justify-content: space-around;
  -webkit-align-items: center;
  -ms-align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  display: -webkit-flex;
  display: -ms-flex;
  width: 450px;
  height: auto;
  border: 1px solid #8BC34A;
  align-self: center;
  -ms-align-self: center;
  -webkit-align-self: center;
}
.item {
  justify-content: center;
  margin: 5px;
  display: inline-flex;
  width: 100px;
  height: 50px;
  background-color: #03A9F4;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  display: -webkit-inline-flex;
  display: -ms-inline-flex;
}
span {
  align-self: center;
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  -webkit-align-self: center;
  -ms-align-self: center;
}
body {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#title {
  display: flex;
  color: grey;
  font-family: sans-serif;
  font-size: 20px;
  margin: 10px;
}
#sub-title {
  display: flex;
  color: grey;
  font-family: sans-serif;
  font-size: 15px;
  margin-bottom: 15px;
}
button {
  width: 100px;
  height: 40px;
  background-color: #03A9F4;
  color: white;
  align-self: center;
  margin: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>

  <style id="js-css">
  </style>

  <span id="title">Flexbox Grid</span>
  <span id="sub-title">How to make each row have the same number of items?</span>

  <div id="container">
    <div class="item">
      <span>ITEM #1</span>
    </div>
    <div class="item">
      <span>ITEM #2</span>
    </div>
    <div class="item">
      <span>ITEM #3</span>
    </div>
    <div class="item">
      <span>ITEM #4</span>
    </div>
    <div class="item">
      <span>ITEM #5</span>
    </div>
    <div class="item">
      <span>ITEM #6</span>
    </div>
  </div>

  <button onClick="increase()">+</button>
  <button onClick="resize()">Resize Items</button>
  <button onClick="decrease()">-</button>

</body>

</html>

flexbox可以在多行上均匀划分项目吗？

3 个答案: