如何使网格列表中的每一行具有相同数量的项目（使用Flexbox）？ [英] How to make every row in a grid list have the same number of items (using Flexbox)?

查看：120
本文介绍了如何使网格列表中的每一行具有相同数量的项目（使用Flexbox）？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用以下CSS（使用）

  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;显示：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;显示：-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;显示：-webkit-inline-flex; display：-ms-inline-flex;} span {align-self：center;颜色：白色; 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;颜色：灰色font-family：sans-serif; font-size：20px; margin：10px;}＃sub-title {display：flex;颜色：灰色font-family：sans-serif; font-size：15px; margin-bottom：15px;} button {width：100px; height：40px; background-color：＃03A9F4;颜色：白色; 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>如何使每一行都有相同数量的项目？< / 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（）>调整项大小< / button> < button onClick =decrease（）>  - < / button>< / body>< / html>  
解决方案
 
 
 
  #container {display：flex; flex-flow：row wrap; align-items：center; justify-content：center; min-height：200px; background：＃444;}。item {flex：11 31％;背景：＃222;保证金：0 1％; height：40px;} span {color：white; }  
 
 <！DOCTYPE html>< html& ;头> < 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>  
 
 
 
 
I use the following CSS (with Flexbox) too achieve the grid list seen in the first image below:
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex-direction: row;

The problem is that I'd like to spread out the items in the list. More specifically, I'd like every row to have the same number of items. In the case of the first image below, I'd like the MasterCard item to be moved to the second row, as seen in the second image.



It currently looks like this:






This how I'd like to it look:






Since the size of the container can change, I can't just change the margin (which I did to produce the second image).



Here is an example: (or alternatively a 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>









Any help would be appreciated. 



JavaScript Solution



Since this question has been marked as duplicate, I have to post this answer in the question.



The JavaScript code is:
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; }';
};

You can run the resize() function when the viewport is resized.



Here is an example: (or alternatively a 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>






 解决方案 




#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>








                        
这篇关于如何使网格列表中的每一行具有相同数量的项目（使用Flexbox）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆