小编mic*_*Pau的帖子

我有一个flex的问题.

我有一个包装器,可以显示最少1个,最多9个方块.根据网格中的平方数,正方形可以有多种尺寸.除了一个,我已经完成了所有必需的工作,如下图所示:

我的风格是:

.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: space-between;
    width: 300px;
    height: 300px;
    position: relative;
}

加.图像的大小基于它们的总数和它们在列表中的位置.

所以当我从右下方有一个大正方形(占据4个小方块的位置)和5个小方块时,问题出现了.

最重要的是他应该是第一个.

在他旁边(右上角)是第二个,这也是正确的.

第三个位于左下角,它应位于第二行和最右侧.因为这个,所有其他人都处于错误的位置,所以最后一个是溢出的.

我已经尝试了很多值组合justify-content,align-content,align-items和align-self,但没有工作过.

如果没有针对此的灵活解决方案,我将回到大量课程并定位绝对解决方案.但我不喜欢它.这是太多的风格,看起来不太好.

任何建议将不胜感激.

<div class="flexbox">
     <div class="1"></div>
     <div class="2"></div>
     <div class="3"></div>
     <div class="4"></div>
     <div class="5"></div>
</div>

.flexbox{
 height:500px;
width:500px;
}

我想要这样的东西 https://awwapp.com/s/b6c9c247-2dba-4ec9-a47d-1f165679ba03/

我不能改变我的结构.我想要一个flexbox解决方案.

div剂量的顺序很重要,只要他们有同一个父母.

我试过用flex:wrap.宽度,高度=两个div和宽度的50%,高度= 50%,休息三的33.3%,但它给了我像https://awwapp.com/s/237968ae-c13f-4d0d-bab2-07024486b3c4/

.

谁能帮我吗 ？

我在sweetalert消息中显示倒计时时遇到问题.点击后我使用"带自动关闭计时器的消息".我希望倒计时在消息中,用户可以看到倒计时.

swal({  
    title: "Please w8 !",
    text: "Data loading...",
    timer: 10000,
    showConfirmButton: false 
});