flex 布局平分布局并且最后一行左对齐和流式布局

最新推荐文章于 2024-03-14 00:02:38 发布

parade岁月

最新推荐文章于 2024-03-14 00:02:38 发布

阅读量358

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/parade0393/article/details/121213320

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

原里是动态计算右外边距，不使用flex的justify-content

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <title>Title</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .mycards {
            width: 98%;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            /*justify-content: space-between;*/
        }

        .card_item {
            width: 31%;
            background-color: #24c789;
            height: 20px;
            margin-bottom: 10px;
        }
        .card_item:not(:nth-child(3n)){
            margin-right: calc(7%/3);
           /*  这个可以根据需求自行修改 7%=100%-31%(宽度)*3(列数) 每行最后一个没有margin*/
        }
.tagList em{
    display: inline-block;
    margin: 10px 0 0 10px;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    font-style: normal;
    border: 1px solid #eeeeee;
    border-radius: 5px;
    color: #222;
}
    </style>
</head>
<body>
<div class="mycards">
    <div class="card_item"></div>
    <div class="card_item"></div>
    <div class="card_item"></div>
    <div class="card_item"></div>
    <div class="card_item"></div>
    <div class="card_item"></div>
    <div class="card_item"></div>
    <div class="card_item"></div>
</div>
<div class="tagList">
    <em>放的都是精华</em>
    <em>的覅</em>
    <em>是的是的方法的多少发</em>
    <em>户的身份</em>
    <em>的身份的覅</em>
    <em>是的是的方法的多少发</em>
    <em>的覅</em>
</div>
</body>
</html>

parade岁月

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
flex 布局平分布局并且最后一行左对齐和流式布局

原里是动态计算右外边距，不使用flex的justify-content<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/> <
复制链接

扫一扫