元素均匀排列多行之grid布局（解决常规margin-right)

Posted 2023-03-16

参考技术A 遇到这种布局的时候，一开始总是不知道如何下手 因为需要考虑到各移动端的自适应问题

最初的思路是给每个元素一个margin-right，和margin-bottom. 后发现最右端的不好处理 有的屏幕智能放得下4个有的能放5个

后面就想用 display: flex; justify-content: space-around; 这样又会新出现一个 问题 最后一行 没填满的时候 around 就会很丑了 。 自己去补的话 也显得很傻

网上到处搜margin-right解决方案也找不到 后面得知了grid栅格布局 嘿嘿嘿

贴上链接： https://css-tricks.com/snippets/css/complete-guide-grid/

想要实现这个很简单。 

给父容器 设置 display: grid; 然后设置grid-template-columns: ; 这个用来规定一行有多少列 每列多宽。因我的子元素 宽44px 所以设置的44px. 然后设置每一行的间距 grid-row-gap: 24px;  justify-content: space-between; 和display:flex；一样 这样每行的布局就是 space-between 的布局了。 自动均分列间距。

使用grid布局的好处是。 它自动给我们在一行元素不够时 补足空白元素！ 实现 均分效果~ 

css流式布局与多行省略号显示

此文仅供自己记录使用。若有雷同，敬请谅解！

流式布局

即文档常规流，指的是页面元素按照默认情况下页面元素正常的排列方式，内联元素按内联方向一个接一个显示。块元素从顶部开始向下显示并移动页面。

脱离文档流的方式

1、absolute定位

绝对定位，元素会被移出正常文档流。不会给元素预留空间，元素依据最近的非static定位的祖先元素来确定元素的位置。

2、fixed定位

固定定位，元素会被移除正常文档流，不会给元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置

3、float为非none

float属性指定css元素应该沿容器的左侧或者右侧平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

以上都是对基础知识的回顾。

多行省略号显示

思路：

1
左侧部分为基准高度，当主题部分红色区域内容超过左侧高度时，我们让橘色部分显示在左下角。当主题部分等于或小于左侧高度时，让其贴在右边角。我们让左下角显示的部分移动到右侧主题部分底角与下边缘重合。
可行的方案：
让主体部分右浮动，省略号部分右浮动，同时要让省略号部分能够填充到左侧部分，利用margin负值来解决。负值<= -（省略号部分的宽度 - 左侧部分的宽度）。然后通过left:100%调整其相对于自身（position:relative)位置到右侧，并通过调整top来达到与右侧部分底部重合。

直接上代码

<template>
    <div class="tump-wrap" :style="`height:${tumpHeight}px`">
        <span>{{tumpCnt}}</span>
    </div>
</template>
<script>
export default {
    props:{
        tumpCnt: {
            type: String | Number,
            default: \'tump测试内容\'
        },
        tumpHeight: {
            type: Number,
            default: 48
        }
    }
}
</script>
<style scoped>
    .tump-wrap{
        position: relative;
        overflow: hidden;
        width: 100%
    }
    .tump-wrap::before{
        float: left;
        width: 5px;
        height: 100%;
        content: \'\';
    }
    .tump-wrap>span{
        width: 100%;
        margin-left: -5px;
        float: right;
        line-height: 24px;
    }
    .tump-wrap::after{
        content: \'...\';
        float: right;
        width: 30px;
        left: 100%;
        top: -24px;
        margin-left: -25px;
        position: relative;
        background: linear-gradient(90deg,hsla(0,0%,100%,0),#fff 60%,#fff);
    }
</style>

志不达者智不强