justify-content

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

flex-start：預設值，對齊最左邊的main start

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

center：水平居中

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

space-around：平均分配內容元素，間距也是平均分配

align-items

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

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

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

center：垂直居中

stretch：預設值，將內容元素全部撐開(kāi)至Flexbox的高度

baseline：以所有內容元素的基線(xiàn)作為對齊標準