深入解析CSS FlexBox

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)容元素，間距也是平均分配

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)