深入解析CSS FlexBox

justify-content

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

flex-start：預(yù)設(shè)值，對(duì)齊最左邊的main start

flex-end：對(duì)齊最左邊的main end

center：水平居中

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

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

align-items

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

flex-start：對(duì)齊最上面的cross start

flex-end：對(duì)齊最下面的cross end

center：垂直居中

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

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