使用flexbox，如何使卡片不会长大，以填充最后一行的空间？ [英] Using flexbox, how to make the cards not grow to fill the space on the last row?

问题描述

我怎么能通过使用flexbox使所有卡片的大小相同，在第二行，如果没有足够的卡片填充行，那么将卡片对齐左侧，并留下空的空间正确的？目前，卡片成长，填补了第二排的空间。

这是我的CSS： p>

  .container {
 display：flex; 
 flex-flow：换行; 
 align-content：flex-start; 
} 
 
 .card {
 flex：1 1 0; 
填充：0.5rem; 
 
  

解决方案

JavaScript：

 =  $（'。container'）。append（$（'< div / >'，{class：'sizer'}））; 
 let topSizer = $（'。sizer'）[0] .getBoundingClientRect（）。top，
 perCent = 100; 
 while（$（'。sizer'）[0] .getBoundingClientRect（）。top === topSizer&& topSizer> 0）{
 $（'。sizer'）。css {flexBasis：（PERCENT  - ）+ '％'}）; 
 
  

.sizer {
flex-basis：100％;



$ b $ p $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $' code>作为最后一个元素，它最初具有 flex-basis：100％。比它减少它的 flex-basis ，直到它被定位在前一行，有效地将其余的项目推到行的开始。

下面的脚本的第一部分只是将随机单词的卡片添加到 .container （忽略它） / p>

let words = ['interesting'，' （var i = 0; 0）的优秀，开始，粘性，跛足，不平衡，不灵通，可怕，减少 i <20; i ++）{let text ='';对于（var j = 0; j <3; j ++）{text + = words [parseInt（Math.random（）* words.length）] +''} $（'。container'）。append（$（' < div />'，{class：'card'，text：text}））} //上面的脚本生成随机单词卡片。果汁在$（'。container'）。append（$（'< div />'，{class：'sizer'}））; let topSizer = $（'。sizer'）[0] .getBoundingClientRect （）.top，perCent = 100; while（$（'。sizer'）[0] .getBoundingClientRect（）。top === topSizer&& topSizer> 0）{$（'。sizer'）.css （{flexBasis：（perCent - ）+'％'}）;}

  .container {display：flex; flex-flow：排行; align-content：flex-start;}。card {flex：1 1 0;填充：0.5rem; margin：0 -1px -1px 0; border：1px solid #ccc;}。sizer {flex-basis：100％;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =container>< / div>  

How could I, by using flexbox, make all the cards the same size, and on the second row, if there aren't enough cards to fill the row, then align the cards to the left, and leave empty space on the right? At the moment, the cards grow to fill the space, on the second row.

Here is my CSS:

.container {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
}

.card {
    flex: 1 1 0;
    padding: 0.5rem;
}

解决方案

Here's how to get this with JavaScript:

$('.container').append($('<div />', {class:'sizer'}));
let topSizer = $('.sizer')[0].getBoundingClientRect().top,
    perCent = 100;
while ($('.sizer')[0].getBoundingClientRect().top === topSizer && topSizer > 0) {
  $('.sizer').css({flexBasis:(perCent--)+'%'});
}

.sizer {
  flex-basis: 100%;
}

What it does is add a .sizer as the last element, which has flex-basis:100% initially. Than it reduces its flex-basis until it gets positioned on the previous row, effectively pushing the rest of the items to the rows' start.

The first part of the script below just adds cards with random words to .container (ignore it).

let words = [
  'interesting',
  'tongue',
  'excellent',
  'start',
  'sticky',
  'lame',
  'lopsided',
  'ill-informed',
  'terrible',
  'reduce',
  'near',
  'order'
]
for (var i = 0; i < 20; i++) {
  let text = '';
  for (var j = 0; j < 3; j++) {
    text += words[parseInt(Math.random() * words.length)] + ' '
  }
  $('.container').append($('<div />', {
    class: 'card',
    text: text
  }))
}
// the above script generates cards with random words. juice is below:

$('.container').append($('<div />', {class:'sizer'}));
let topSizer = $('.sizer')[0].getBoundingClientRect().top,
    perCent = 100;
while ($('.sizer')[0].getBoundingClientRect().top === topSizer && topSizer > 0) {
  $('.sizer').css({flexBasis:(perCent--)+'%'});
}

.container {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.card {
  flex: 1 1 0;
  padding: 0.5rem;
  margin: 0 -1px -1px 0;
  border: 1px solid #ccc;
}
.sizer {
  flex-basis: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

这篇关于使用flexbox，如何使卡片不会长大，以填充最后一行的空间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！