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

时间：2015-01-16 20:00:42

标签： html css layout flexbox

我使用下面的CSS（Flexbox}）也实现了下面第一张图片中的网格列表：

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

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

目前看起来像这样：

enter image description here

这就是我想看的样子：

enter image description here

由于容器的大小可以改变，我不能只改变边距（我做的是产生第二张图像）。

以下是一个示例：（或者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>

2 个答案:

答案 0 :(得分：2)

＆＃13;
＆＃13; 
#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; 
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

相关问题
最新问题