css,flex布局多列,解决最后一行不对齐

项目需求:在自适应的时候两边边距与中间边距一样,一行两个,第三个自动靠左边,如图


image.png

解决代码如下:


image.png

这里这里这里→
/*html内容*/
<div class="ns_class_video">
        <div style="width: 100%;"><img style="width: 100%;height: 105px;" src="../../ny-main-expert/img/fuwu.png" alt=""></div>
</div>
/*css样式*/
.ns_class_content{
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    padding: 0 20px;
  }
  .ns_class_video{
    width:calc((100% - 10px*2)/2);
    border-radius:10px;
    text-align: center;
    border:1px solid #333;
    margin-bottom:20px;
  }

一行三个:如图
敲重点!!!!-----> width:calc((100% - 10px*n)/n);

.ns_class_video{
    width:calc((100% - 10px*3)/3);
    border-radius:10px;
    text-align: center;
    border:1px solid #333;
    margin-bottom:20px;
  }
image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容