css样式一行四个均分flex排版（终极解法）

最新推荐文章于 2024-03-20 10:31:02 发布

大力水手~

最新推荐文章于 2024-03-20 10:31:02 发布

阅读量1.3k

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/weixin_44705979/article/details/132317681

版权

1.需求
在这里插入图片描述

<div class="bottom-tables">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</div>
<style>      
    .bottom-tables {
      width: 100%;
      margin-top: 30px;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      // overflow-y: scroll;
      > div {
        width: 22.75%;
        margin-right: 3%;
        margin-bottom: 10px;
        background: #1d274b;
        border-radius: 19px;
        box-sizing: border-box;
        height: 245px;
        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
 </style>