怎么用flex实现这种布局？

Question

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

Answer 1

直接上代码~

// 包裹盒子
.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;
    }
}

Answer 2

.parent{
  display:flex;
  justify-content: start;
  flex-wrap: wrap;
}
.child{
    flex:33.33%
    flex-grow:0;
    width:10px;
}

不知道符不符合你的需求

Answer 3

ul {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 33.3%;
  }
}

Answer 4

使用space-between可以在最后一行补充空白的标签（设置visibility: hidden;），和前面的数量对齐

Answer 5

多看看 css3 教程 这个 应该是最简单的了