• 技术文章 >Web开发 >css教程

    css中align-self属性是什么

    小妮浅浅小妮浅浅2021-09-28 10:37:03原创147

    1、align-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。

    2、align-self多了个auto(默认值),表示继承自flex容器的align-items属性值。

    实例

      .container{
           /* 定义flex容器 */
           display: flex;
           /*
                       设置容器内部元素的排列方向
                      row: 定义排列方向 从左到右
                      row-reverse: 从右到左
                      column: 从上到下
                      column-reverse: 从下到上    
           */
          flex-direction: row;
          
          /*
               设置容器中元素 在交叉轴上的对齐方式
               stretch: 当元素的高度没有设置, 则元素的高度 会拉伸至 容器高度一致 (默认)
               flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
               flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
               center: 居中对齐
               baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
           */
     
          align-items: baseline;
          
          height: 800upx;
          background-color: #FFC0CB;
          
         }
           
         .txt{
             font-size: 20px;
             width: 150upx;
             height: 150upx;
         }
           
         .red{
             background-color: red;
             
             /*
                重写容器中元素在交叉轴上的对齐方式
                auto: 默认, 表示继承父级元素的 align-items属性
                stretch: 当元素的高度没有设置, 则元素的高度 会拉伸至 容器高度一致 (默认)
                flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
                flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
                center: 居中对齐
                baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
              */
             align-self: center;
         }
         
         .green{
            background-color: green;
         }
        
         .blue{
             background-color: blue;
         }

    以上就是css中align-self属性的介绍,希望对大家有所帮助。更多css学习指路:css教程

    专题推荐:css align-self
    品易云
    上一篇:css中flex-basis属性是什么 下一篇:没有了

    相关文章推荐

    • css中盒模型的注意点• css中counter-reset属性是什么• css中counter-increment属性是什么• css中counter()函数的介绍• css中couters函数是什么• css中align-content属性是什么• css中align-items属性是什么• css中justify-content属性是什么• css中flex-flow属性是什么• css中flex-wrap属性是什么• css中flex-direction属性是什么• css中order属性的介绍• css中flex-grow属性是什么• css中flex-shrink属性是什么• css中flex-basis属性是什么

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网