flex里的小众元素实现方式

总有一些元素想与在同一容器的其他元素相比与众不同，成为小众哥。遇到这样的群体，我们应该怎么做呢？

1.flex里的小众元素实现方式

align-items和align-self

这是在同一个flex容器中，默认方向下，交叉轴也就是垂直方向的实现方式。比如麻将中的3筒

<body>
    <div class="tong">
        <div class="circle tong_1"></div>
        <div class="circle tong_2"></div>
        <div class="circle tong_3"></div>
    </div>

    <style lang="less">
    .tong{
/* (1) 基础样式 */
    display: flex;
    flex-direction: column;
    height: 100px;
    width: 80px;
    gap: 5px;
    /* 我来实现一个像3d效果一样的按钮 */

    /* 内边框 */
    border:2px solid #5a5a5a;
    /* 阴影 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

    /* 外边框（不计入总宽度） */
    outline:2px solid #ccc;
    /* 内外边框的距离 */
    outline-offset:5px;

.circle{
    height:28px;
    width:28px;
    background-color: rgb(127, 127, 255);
    border-radius: 50%;
}
    .tong_1{
        align-self: flex-start;
    }

    .tong_2{
        align-self: center;
    }
        .tong_3{
        align-self: flex-end;
    }

    }
</style>

效果图如下

justify-content和justify-self

和align类似只是他控制的是主轴，

2.GRID的place-items和place-content

和标题核心不同，这两个的区别是在于前者控制子元素们垂直，居中的方式后者是整个容器垂直，居中的对齐方式

posted on 2025-12-10 17:33 gagafan 阅读(6) 评论(0) 收藏举报