怎么用flex实现这种布局?

吹个波波玩波波
  • 17

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

回复
阅读 588
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;),和前面的数量对齐

RomanceLink
  • 2
新手上路,请多包涵

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

你知道吗?

宣传栏