怎么用flex实现这种布局?

image
如图……
父元素元素未知(比如100px)
子元素宽度已知且固定(比如10px),多余部分均匀间隔开来
如果用space-between的话上面那行正确,下面那行就不对了
flex-start感觉是对的,但是子元素宽度不知如何设置
flex-basis:33.3% 实现不了,有点懵
求大神指点

阅读 386
评论
    5 个回答

    直接上代码~

    // 包裹盒子
    .out-contain{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    // 里面盒子
    .inner-contain{
        width:calc(100% / 3);
        height:20px; // 自定
        display: flex;
        justify-content: center;
        align-items: center;
        .btn-item{
            // 里面再写btn样式
            width:10px;
        }
    }
      相似问题
      推荐文章