处理flex弹性，space-between，space-around 的最后一行

拿我格子衫来

发布于 2022-01-24 15:55:08

1K0

发布于 2022-01-24 15:55:08

文章被收录于专栏：TopFE

先看效果图

最后一行补位，补充多个元素， height: 1px;， visibility: hidden

使用了最小宽度来保证每个元素在缩放时，能够以最小宽度正常显示。也有一个固定宽度为了避免数据少时，独占一行,显示难看。

解决上下行元素多出的间隔使用align-content: baseline;

核心代码

.item.h1 {
      height: 1px;
      visibility: hidden
 }

 <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="http://www.softwhy.com/" />
    <title>scrollWidth和scrollHeight属性-蚂蚁部落</title>
    <style type="text/css">
        .container {
            width: 90%;
            border: 1px solid #ddd;
            display: flex;
            height: 600px;
            overflow: auto;
            justify-content: space-around;
            flex-wrap: wrap;
            align-content: baseline;
        }

        .container::after {
            /* content: ""; */
            /* flex: auto; */
            /* margin-right: 10px; */
        }

        .item {
            /* margin-top: 50px; */
            margin-right: 10px;
            padding: 0 10px;
            height: 50px;
            /* background-color: red; */
        }

        .item {
            flex: 1;
            border: 1px solid red;
            height: 100px;
            min-width: 240px;
            width: 300px;
            margin-right: 10px;
            margin-bottom: 20px;
        }

        .item.h1 {
            height: 1px;
            visibility: hidden
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item h1"></div>
        <div class="item h1"></div>
        <div class="item h1"></div>
        <div class="item h1"></div>
        <div class="item h1"></div>
    </div>

</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

height