國外開源建站系統(tǒng)參考消息今天新聞
問題:換行后,行間出現(xiàn)空白間隔,如果沒有設(shè)置父容器的高度,不會出現(xiàn)這個問題,父容器高度會隨子項增多,而變大。
.content {height: 8rem;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: flex-start;.item {width: 125px;height:200px;}
}
解決:父容器添加 align-content: flex-start;
說明:
align-content是Flex布局中用于控制多行子項在交叉軸上的對齊方式的屬性。它僅在有多行子項時才會生效,如果子項只有一行,則align-content屬性不會產(chǎn)生任何效果。(生效條件:display:flex;flex-direction:row;flex-wrap:wrap;)
常見的 align-content 取值包括:
flex-start:多行子項在交叉軸的起始端對齊。
flex-end:多行子項在交叉軸的末端對齊。
center:多行子項在交叉軸上居中對齊。
space-between:多行子項均勻分布在交叉軸上,兩端無空隙。
space-around:多行子項均勻分布在交叉軸上,兩端留有空隙。
**stretch:多行子項被拉伸以填滿交叉軸上的可用空間。默認(rèn)**
補充:
align-self 是Flex布局中用于單個子項控制其在交叉軸上的對齊方式的屬性。通過為單個子項設(shè)置 align-self 屬性,可以覆蓋容器的 align-items 屬性,從而針對該子項進(jìn)行個別的對齊方式設(shè)置。
align-self 的取值與 align-items 的取值類似,常見的取值有:
auto:子項的對齊方式將繼承容器的 align-items 屬性。
flex-start:子項在交叉軸的起始端對齊。
flex-end:子項在交叉軸的末端對齊。
center:子項在交叉軸上居中對齊。
baseline:子項基于基線對齊。
stretch:子項被拉伸以填滿交叉軸的高度。
問題解決過程中主要參考了
https://blog.csdn.net/caseywei/article/details/109075874