flex布局items:align-self;

最新推荐文章于 2024-07-19 14:29:49 发布

原创最新推荐文章于 2024-07-19 14:29:49 发布 · 1k 阅读

CC 4.0 BY-SA版权

本文介绍了在Flex布局中，`align-self`属性用于设置单个子元素在交叉轴上的对齐方式。当为items设置`align-self`时，它将覆盖父元素`container`上的`align-items`属性。通过代码示例展示了`align-self`的使用效果，总结指出未设置`align-self`的items会遵循父元素的居中对齐，而设置了`align-self`的items则保持其设定的对齐方式。

align-self

align-self是设置单个items的对齐方式的
align-self可以单独给items设置对齐方式,他对齐的是container的交叉轴
具体代码:

    <style>
        .test{
            height: 400px;
            width: 400px;
            background-color: #f00;
            /* 开启flex布局 */
            display: inline-flex;
        }
        .box{
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: #ff0;
            /* 对齐container的交叉轴seart(开始位置) */
            align-self:flex-start;
        }
        .box2{  
            background-color: #0f0;
            /* 对齐container的交叉轴end(结束位置) */
            align-self: flex-end;
        }
        .box3{
            background-color: #fff;
        }
        .box4{
            background-color: #666;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="box1 box">idems1</div>
        <div class="box2 box">idems2</div>
        <div class="box3 box">idens3</div>
        <div class="box4 box">idens4</div> 
    </div>
</body>

代码效果:
在这里插入图片描述
然后我又在container上面设置了让items居中对齐,测试那个会生效,
具体代码

        .test{
            height: 400px;
            width: 400px;
            background-color: #f00;
            /* 开启flex布局 */
            display: inline-flex;
            /* 设置所有的items在交叉轴上居中对齐 */
            align-items: center;
        }
        .box{
            height: 100px;
            width: 100px;
        }
        .box1{
            background-color: #ff0;
            /* 对齐container的交叉轴seart(开始位置) */
            align-self:flex-start;
        }
        .box2{  
            background-color: #0f0;
            /* 对齐container的交叉轴end(结束位置) */
            align-self: flex-end;
        }
        .box3{
            background-color: #fff;
        }
        .box4{
            background-color: #666;
            align-self: center;
        }
    </style>
</head>
<body>
    <div class="test">
        <div class="box1 box">idems1</div>
        <div class="box2 box">idems2</div>
        <div class="box3 box">idens3</div>
        <div class="box4 box">idens4</div> 
    </div>
</body>