css中align-self属性是什么

亦凉 2024-03-30 17:50 36阅读 0赞

#### css中align-self属性是什么 ####

![6589802612da9a1bfbd95bb98f3f5166.jpeg][]

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

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

**实例**

CSS

.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中flex-basis属性是什么? ####

![ce42d054f2967b581cf58bc01b6c89c5.jpeg][]

1、flex-basis定义了元素在分配剩余空间之前的默认大小。

2、默认值是auto，即自动。如果有设置width，占用空间就是width。如果没有设置，按照内容宽度。若同时设置width和flex-basis，则在渲染性能方面，将忽略width。

当剩余空间不足时，flex子项的实际宽度通常不是flex-basis的设定尺寸，因为当flex布局剩余空间不足时，默认会收缩。

**实例**

CSS

.c {
    flex-basis:50px;
    }
    .c1 {
    flex-grow:1;
    background-color:#409EFF;
    }
    .c2 {
    flex-grow:2;
    background-color:#EEEEEE;
    }
    .c3 {
    flex-grow:1;
    background-color:#FAEBD7;
    }

以上就是css中flex-basis属性的介绍，希望对大家有所帮助。

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

[6589802612da9a1bfbd95bb98f3f5166.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/347fe810df9f4a2f9f616fcc0ed2b8df.jpeg
[ce42d054f2967b581cf58bc01b6c89c5.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4aa57c7371364c57a534bc1ae319afd2.jpeg