深入剖析CSS弹性盒模型flex

CSS Code复制内容到剪贴板

//主轴对齐方式: 左对齐 | 居中对齐 | 右对齐 | 两端对齐 | 扩散对齐   
//新版本   
justify-content: flex-start[默认] | center | flex-pack | flex-end | space-around   
//混合版本   
flex-pack: start[默认] | center | end | justify | distribute   
//旧版本   
box-pack: start[默认] | center | end | justify | N/A  

[注意]主轴对齐方式与direction、writing-mode、flex-flow都有关

【5】侧轴对齐:用来设置伸缩容器当前行在侧轴方向的对齐方式

CSS Code复制内容到剪贴板

//侧轴对齐方式: 顶边对齐 | 中间对齐 | 底部对齐 | 基线对齐 | 伸缩项目拉伸填充整个伸缩容器   
//新版本   
align-items: flex-start | center | flex-end | baselinebaseline | stretch[默认]   
//混合版本   
flex-align: start | center | end | baselinebaseline | stretch[默认]   
//旧版本   
box-align: start | center | end | baselinebaseline | stretch[默认]  

[注意]如果伸缩项目有width/height属性将优先于侧轴对齐为拉伸的方式

[注意]侧轴对齐方式与direction、writing-mode、flex-flow都有关

【6】堆栈伸缩行:指定多个伸缩项目行在侧轴的对齐方式

CSS Code复制内容到剪贴板

//侧轴对齐方式: 顶边对齐 | 中间对齐 | 底部对齐 | 两端对齐 | 扩散对齐 | 伸缩项目拉伸填充整个伸缩容器   
//新版本   
align-content: flex-start | center | flex-end | space-between | space-around | stretch[默认]   
//混合版本   
flex-line-pack: start | center | end | justify | distribute | stretch[默认]   
//旧版本无对应属性  

[注意]该属性只有在flex-wrap:wrap | wrap-reverse;且伸缩项目存在多行时才生效

　[注意]堆栈伸缩行与direction、writing-mode、flex-flow都有关