时间戳

首页 > 解决方案 > 为什么 flex-wrap:wrap 属性会导致我的 div 大小不均？

html - 为什么 flex-wrap:wrap 属性会导致我的 div 大小不均？

问题描述

我为我的容器和 flex-wrap:wrap 使用了 flex box，但是我的子 div 变得不均匀。如何修复它？

.container{

    margin: 0 auto;
    flex-wrap: wrap;
    width: 100%;    
    padding:10px;
    display:flex;
}

.child{
    flex:1;  
    margin: 10px;
    vertical-align: center;
    width:100px;
    length:100px;
    border:2px solid gray;
    display: inline;
    float:left;
    padding:65px;
    background-image:;  
    text-align: center;
}

假设有 11 个子 div，它显示在三行中。现在最后一行仅显示 11 个 div 中剩余的 3 个 div，因此它水平拉伸了这些 div。 这就是我得到的

因此，我试图保持所有 div 大小相同，并使最后一行 div 对齐中心和相同大小。该怎么办？

标签： htmlcssflexbox

解决方案

移除 flex:1 并且不需要在 flex 框中浮动：left

推荐阅读