我想在Flexbox中的CSS中更改板的位置

Question

让我首先说我没有设置使用flexbox，所以如果必须使用其他方法，我可以接受。我正在制作一个JavaScript网站，其中显示带有问题和答案的标牌。问题长度各不相同，答案数量也各不相同-因此，标牌的高度不同。

它们可能是，但我喜欢它们的外观不是这样。黑色图像显示了当前的外观，白色图像显示了我想要的外观。我希望能够完全自定义这些标牌的位置，使其始终为5px appart的固定距离。

另外，如果一块盘子很长，我希望有可能3个小盘子可以在不改变大小的情况下在任一侧移动，而只是以这种凌乱干净的外观布置。

所需的外观：

当前外观：

（注意：更改是印版的放置，需要通过photoshop制作）

请注意，我尝试使用right left top和bottom，但它们没有任何作用。

这是一个板块的代码，但是每个板块的大小随答案的数量而变化，我还取出了所有预定义的和否则定义的变量。

<div className="Polls">
    <div className="Poll-1">
        text
    </div>
</div>

.Polls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 5px;
  justify-content: center;
  background-color: black;
}

.Poll-1 {
  width: 210px;
  height: 190px;
  margin: 5px;
  border-style: solid;
  border-bottom-width: 1px;
  border-top-width: 1px;
  border-left-width:1px;
  border-right-width: 0.5px;
  border-radius: 10px;
  border-color: rgb(51, 51, 51);
}

Answer 1

所以这是我尝试使用一些js对数据进行排序的方法。

基本上，我在一个flex-row容器内创建了4个flex-columns。

JS本质上是在列之间对数据进行排序，而不是全部输出到一个元素中。它在列之间循环，直到没有更多数据要输出为止。

通过这种方式，flex列可以适应下一个元素的高度，您将获得“整洁”的外观……我想。

// this to generate dummy poll data in an array of objects with various hights
var polls = [];
for(i=0;i<20;i++){ // generating 20 polls
 var randomHeight = Math.floor(Math.random()*50)+150; // setting them with random height property
	polls.push({text:'poll '+ (i+1),height:randomHeight})
}

// we loop through each element in the array of data, and assign it to different flex columns
// notice how each coloumn is named with a corresponding number
for(col=1,i=0; i<polls.length-1; i++) {
	var elm = $('<div class="poll"></div>'); // creating the generic element
  elm.text(polls[i].text); // injecting the content into the element
  elm.height( polls[i].height); // injecting height to illustrate different content size
	$('div#col'+col).append(elm); // eppending the element with it's content to the respective column
  col = col < 4 ? col+1 : 1;   // each time i check if I need to reset to the first column or move to the next one. 
  //You could also set a variable number of columns and generate them too.
}

.container{
 display:flex;
 flex-direction:row;
 flex-wrap:nowrap;
 justify-content: start;
 background:darkgrey;
}
.polls {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: start;
  align-items: stretch;
  margin:2px;
  padding:1px;
  background-color: grey;
  width:210px;
}

.poll {
  height: 190px;
  margin-bottom: 5px;
  border-style: solid;
  border-radius: 10px;
  border-color: rgb(51, 51, 51);
  color: white;
  border: 2px solid white;
  background:black;
}

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

  </div>
  <div class="polls" id="col3">

  </div>
  <div class="polls" id="col4">

  </div>

</div>