justify-content
justify-content決定了內容元素與整個Flexbox的“水平對齊”位置，回想一下最上面講的Flexbox盒子模型，具有main start與main end左右兩個端點，justify-content就是按照這個方式做設定，而其中的設定值總共有下列五個。
flex-start：預設值，對齊最左邊的main start
flex-end：對齊最左邊的main end
center：水平居中
space-between：平均分配內容元素，左右元素將會與main start和main end貼齊
space-around：平均分配內容元素，間距也是平均分配
align-items
align-items剛好和justify-content相反，align-items決定了內容元素與整個Flexbox的“垂直對齊”位置，再回想一下最上面講的Flexbox盒子模型，具有cross start與cross end左右兩個端點，align-items與align-self就是按照這個方式做設定，設定值總共有下列五個。
flex-start：對齊最上面的cross start
flex-end：對齊最下面的cross end
center：垂直居中
stretch：預設值，將內容元素全部撐開至Flexbox的高度
baseline：以所有內容元素的基線作為對齊標準
發表評論