龍巖易富通網(wǎng)絡(luò)科技有限公司

龍巖小程序開發(fā),龍巖分銷系統(tǒng)

深入解析CSS FlexBox

2021.07.03 | 1405閱讀 | 0條評論 | css

justify-content

justify-content決定了內(nèi)容元素與整個Flexbox的“水平對齊”位置,回想一下最上面講的Flexbox盒子模型,具有main start與main end左右兩個端點(diǎn),justify-content就是按照這個方式做設(shè)定,而其中的設(shè)定值總共有下列五個。


flex-start:預(yù)設(shè)值,對齊最左邊的main start

flex-end:對齊最左邊的main end

center:水平居中

space-between:平均分配內(nèi)容元素,左右元素將會與main start和main end貼齊

space-around:平均分配內(nèi)容元素,間距也是平均分配

4d1dea46443c98e7a8d43c6b92e63776.jpg


align-items

align-items剛好和justify-content相反,align-items決定了內(nèi)容元素與整個Flexbox的“垂直對齊”位置,再回想一下最上面講的Flexbox盒子模型,具有cross start與cross end左右兩個端點(diǎn),align-items與align-self就是按照這個方式做設(shè)定,設(shè)定值總共有下列五個。


flex-start:對齊最上面的cross start

flex-end:對齊最下面的cross end

center:垂直居中

stretch:預(yù)設(shè)值,將內(nèi)容元素全部撐開至Flexbox的高度

baseline:以所有內(nèi)容元素的基線作為對齊標(biāo)準(zhǔn)

842a487252c378eb9a8dab8d549edd80.jpg

贊 (

發(fā)表評論