脚本宝典收集整理的这篇文章主要介绍了css flex布局的使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
felx弹性布局
display:flex;
属性值
flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。默认为水平方向 row， column 值设置垂直方向。如：flex-direction: row;
flex-wrap 属性规定是否应该对 flex 项目换行。默认不换行nowrap，wrap 规定行装不下就换行。如：flex-wrap: wrap;
flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。如：flex-flow: row wrap;
justify-content 属性用于对齐 flex 。
center值将 flex 项目在容器的中心对齐，
flex-start 值将 flex 项目在容器的开头对齐（默认），
flex-end 值将 flex 项目在容器的末端对齐，
space-around 值显示行之前、之间和之后带有空格的 flex 项目，
space-between 值显示行之间有空格的 flex 项目。
align-items 属性用于垂直对齐 flex 项目。
center 值将 flex 项目在容器中间对齐，
flex-start 值将 flex 项目在容器顶部对齐，
flex-end 值将弹性项目在容器底部对齐，
stretch 值拉伸 flex 项目以填充容器（默认），
baseline 值使 flex 项目基线对齐，
学习了这些我们来一起简单的使用一下吧！
实现居中
flex 容器的直接子元素会自动成为弹性（flex）项目。
order 属性规定 flex 项目的顺序。默认为0；值为数字 1 2 3 4 5 6... 是多少就排在第几个。
flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。默认为0，值为数字。
flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。
flex-basis 属性规定 flex 项目的初始长度。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
align-self 属性规定弹性容器内所选项目的对齐方式。
align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。
以上是脚本宝典为你收集整理的css flex布局的使用全部内容，希望文章能够帮你解决css flex布局的使用所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。