怎么用flex实现这种布局?

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

阅读 383
评论
    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;
        }
    }
      .parent{
        display:flex;
        justify-content: start;
        flex-wrap: wrap;
      }
      .child{
          flex:33.33%
          flex-grow:0;
          width:10px;
      }

      不知道符不符合你的需求

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

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

            • 2
            • 新人请关照

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

              撰写回答

              登录后参与交流、获取后续更新提醒

              相似问题
              推荐文章