添加浏览器前缀： -webkit
display:-webkit-flex; *如果用了弹性布局，子元素不需要浮动
display:flex; 容器添加弹性布局后，显示为块级元素；
display:inline-flex; 容器添加弹性布局后，显示为行级元素；
注意：设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效
-webkit-justify-content： 子元素水平排列方式方式。
center 水平居中
space-between 两端对齐
space-around 手拉手平均分
flex-start 居左对齐
flex-end 居右对齐
-webkit-align-items： 子元素垂直排列
center 垂直居中
space-between 垂直两端对齐
space-around 手拉手上下平均分
flex-start 顶部对齐
flex-end 底部对齐
baseline: 项目的第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
-webkit-flex-direction： 排列方式
row 水平排列-默认值
row-reverse： 主轴在水平方向，起点在右端 ；
column 垂直排列
column-reverse：主轴为垂直方向，起点在下沿。
-webkit-flex-wrap： 默认no-wrap让元素步换行
wrap 换行
nowrap 不换行
wrap-reverse： 换行，并且第一行在容器最下方。
-webkit-align-content: 控制容器内多行在Y轴上的排列方式
stretch 默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
center 居中对齐
flex-start 顶部对齐
flex-end 底部对齐
space-between 上下对齐
space-around 上下手拉手对齐
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/149842.html
