css中align-self屬性是什麼

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屬性的介紹，希望對大家有幫助。