如何使网格列表中的每一行具有相同数量的项目（使用 Flexbox）？ [复制]

Posted

技术标签:

【中文标题】如何使网格列表中的每一行具有相同数量的项目（使用 Flexbox）？ [复制]【英文标题】：How to make every row in a grid list have the same number of items (using Flexbox)? [duplicate] 【发布时间】：2015-03-15 12:36:51 【问题描述】：

我也使用下面的 CSS（带有Flexbox）来实现下面第一张图片中看到的网格列表：

display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;

问题是我想展开列表中的项目。更具体地说，我希望每一行都有相同数量的项目。对于下面的第一张图片，我希望将 MasterCard 项移动到第二行，如第二张图片所示。

目前看起来是这样的：

这是我想要的样子：

由于容器的大小可以改变，我不能只改变边距（我这样做是为了生成第二张图片）。

这是一个示例：（或者JS Bin with prefixes）

#container 
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: row;
  display: flex;
  
  width: 450px;
  height: 130px;
  border: 1px solid #8BC34A;
  -webkit-align-self: center;


.item 
  justify-content: center;
  margin: 5px;
  display: inline-flex;
  width: 100px;
  height: 50px;
  background-color: #03A9F4;


span 
  align-self: center;
  
  color: white;
  font-family: sans-serif;
  font-size: 12px;
  
  -webkit-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;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <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>
  
</body>
</html>

任何帮助将不胜感激。

javascript 解决方案

由于此问题已被标记为重复，因此我必须在问题中发布此答案。

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>

【问题讨论】：

您是说每行总是有固定数量的项目（示例中为 3 个），还是需要某种计算？ @Blue 我需要计算。我编写了一个 JavaScript 解决方案并将其添加到我的问题中。 【参考方案1】： 

#container 
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  
  min-height: 200px;
  background: #444;


.item 
  flex: 1 1 31%;
  
  background: #222;
  margin: 0 1%;
  height: 40px;


span 
  color: white; 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <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 class="item">
     <span>Item #7</span>
    </div>
    <div class="item">
     <span>Item #8</span>
    </div>
    <div class="item">
     <span>Item #9</span>
    </div>
  </div>
  
</body>
</html>

【讨论】：

【参考方案2】：

你的 CSS 很好。您需要更改 HTML 以创建两个容器。第一个保存顶行中的项目，第二个容器 div 保存下一行。

【讨论】：

以上是关于如何使网格列表中的每一行具有相同数量的项目（使用 Flexbox）？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

如何使 WPF 列表框中的列对于所有项目具有相同的宽度？

Android - 网格视图或列表视图？

如何使函数返回 VBA 中的对象列表

如何通过阅读孩子约束使一行的孩子具有相同的高度

如何计算一行中flexbox项目的数量？

如何在 django 管理页面中的每一行的列表页面上放置一个按钮