如何使网格列表中的每一行都具有相同数量的项目（使用 Flexbox）？
dav*_*oxy 5 html css layout flexbox
我使用以下 CSS（带有Flexbox）也实现了下面第一张图片中看到的网格列表：
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
问题是，我想摊开在列表中的项目。更具体地说，我希望每一行都具有相同数量的 items。在下面的第一张图片的情况下，我希望将万事达卡项目移动到第二行，如第二张图片所示。
它目前看起来像这样：
这是我想要的样子：
由于容器的大小可以改变，我不能只改变边距（我这样做是为了生成第二个图像）。
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;
#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;
}任何帮助，将不胜感激。
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）
<!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>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 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();