align-self: stretch 失效

Taonce 發(fā)布于2019-08-30 15:44 / 1935人閱讀

摘要：現(xiàn)象代碼失效，元素沒有預(yù)想中的拉伸。預(yù)期的現(xiàn)象應(yīng)該是這樣的。所有的子元素的高度是。這個(gè)高度是固定的，不可改變的。

現(xiàn)象：

代碼：



    
    
    



    flex-start
    flex-end
    center
    stretch

align-self: stretch 失效，元素沒有預(yù)想中的拉伸。預(yù)期的現(xiàn)象應(yīng)該是這樣的。

為什么這樣？
拉伸的前提是元素可以拉伸。容器的高度是100px。所有的子元素的高度是40px。
這個(gè)高度是固定的，不可改變的。

只需要將需要拉伸的元素的高度設(shè)置成min-height: 40px;而不是height: 40px;就可以了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/116098.html

相關(guān)文章

再次簡單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動縮小，其可能的值為整數(shù)，表示不同的縮小比例。思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

felix0913 2019-08-23 15:29 評論0 收藏0
再次簡單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動縮小，其可能的值為整數(shù)，表示不同的縮小比例。思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

huangjinnan 2019-08-23 15:28 評論0 收藏0
再次簡單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動縮小，其可能的值為整數(shù)，表示不同的縮小比例。思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

CarlBenjamin 2019-08-30 15:55 評論0 收藏0
再次簡單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動縮小，其可能的值為整數(shù)，表示不同的縮小比例。思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

kel 2019-08-30 15:55 評論0 收藏0
再次簡單明了總結(jié)flex布局，一看就懂...

摘要：可能值含義如下假設(shè)主軸為水平方向左對齊右對齊居中對齊兩端對齊沿軸線均勻分布各行將根據(jù)其值伸展以充分占據(jù)剩余空間備注設(shè)置，不然默認(rèn)按照比例排滿一行。默認(rèn)值為，表示當(dāng)空間不足時(shí)，自動縮小，其可能的值為整數(shù)，表示不同的縮小比例。思維導(dǎo)圖 showImg(https://user-gold-cdn.xitu.io/2019/2/26/16927612eee6be1a?w=714&h=1110...

Shimmer 2019-08-02 14:20 評論0 收藏0