关于css3 flex布局的问题

snipaste_20191010_115328.jpg
flex布局 所有盒子是 flex:1
想让CU016这个盒子不占全部 和其他一样宽并且留白
盒子宽度随着屏幕大小变宽
有办法解决吗

阅读 216
评论 2019-10-10 提问
    2 个回答

    子级盒子设置内容宽度了吧 不然CU014和其它的盒子宽度不一样的。

    思路:在最后添加几个占位空白盒子(个数为一行最多展示的个数以上),高度是0.


    示例
    image.png

    评论 赞赏 2019-10-10
      T_one
      • 1.1k

      写了个demo,这是效果图,还有优化的空间
      WX20191010-140701.png

      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <style>
              ul,
              li,
              p {
                  margin: 0;
                  padding: 0;
              }
      
              li {
                  list-style: none;
              }
              ul {
                  width: 400px;
                  border: 1px solid red;
                  display: flex;
                  flex-wrap: wrap;
                  padding: 10px;
                  box-sizing: border-box;
              }
      
              ul li {
                  width: 33.3%;
                  height: 200px;
                  line-height: 200px;
                  font-size: 20px;
                  text-align: center;
                  color: #fff;
                  padding-right: 5px;
                  margin-bottom: 5px;
                  box-sizing: border-box;
                  overflow: hidden;
              }
              p{
                  background: lightseagreen;
              }
      
              ul li:nth-child(3n) {
                  padding-right: 0;
              }
          </style>
      </head>
      
      <body>
          <ul>
              <li>
                  <p>1</p>
              </li>
              <li>
                  <p>2</p>
              </li>
              <li>
                  <p>3</p>
              </li>
              <li>
                  <p>4</p>
              </li>
              <li>
                  <p>5</p>
              </li>
              <li>
                  <p>6</p>
              </li>
              <li>
                  <p>7</p>
              </li>
          </ul>
      </body>
      
      </html>
      评论 赞赏 2019-10-10
        撰写回答

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