flex布局简单总结

一、flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

注意

• 任何一个容器都可以指定为 flex 布局（行内元素也可以使用 flex 布局）
• Webkit 内核的浏览器，必须加上-webkit-前缀
• 设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效

二、父元素属性

属性名	属性值	备注
display	flex	定义了一个flex容器，它的直接子元素会接受这个flex环境
flex-direction	row,row-reverse,column,column-reverse	决定主轴的方向
justify-content	flex-start,flex-end,center,space-between,space-around	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
align-items	flex-start,flex-end,center,baseline,stretch	设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
flex-wrap	Nowrap,wrap,wrap-reverse	如果一条轴线排不下，如何换行
flex-flow	[flex-direction] , [flex-wrap]	是flex-direction属性和flex-wrap属性的简写形式，默认值为row Nowrap

三、子元素属性

属性名	属性值	备注
flex	[number]	flex属性是flex-grow, flex-shrink 和 flex-basis的简写
order	[int]	决定主轴的方向
flex-grow	[number]	设置或检索弹性盒的扩展比率,根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
flex-shrink	[number]	设置或检索弹性盒的收缩比率,根据弹性盒子元素所设置的收缩因子作为比率来收缩空间
flex-basis	[length], auto	设置或检索弹性盒伸缩基准值
align-self	auto,flex-start,flex-end,center,baseline,stretch	设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式，可以覆盖父容器align-items的设置

        感谢浏览，本文皇菇凉只是做简单总结（大佬请Ctrl+F4），如有觉得比较懵之处，可参考这里（阮一峰）大佬文章，详细明了有图有案例；如觉得枯燥乏味不妨去b站看看pink老师讲的课程，生动有趣还有项目，你一定喜欢的不要不要的哟！

<iframe allowfullscreen="true" data-mediaembed="bilibili" frameborder="0" id="BYSWKz19-1586091904094" src="https://player.bilibili.com/player.html?aid=78124254"></iframe>

flex布局（pink老师）