flex布局

               

                                                                                                flex布局

                                                                                                    采用 Flex 布局的元素，称为 Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex项目（flex item），简称“项目”。、

 

 

                                                                                                                                                                                              1、父元素属性

 

属性名	属性值	备注
display	flex	定义了一个flex容器，它的直接子元素会接受这个flex环境
flex-direction	row, row-reverse, column, column-reverse	决定主轴的方向
flex-wrap	nowrap, wrap, wrap-reverse	如果一条轴线排不下，如何换行
flex-flow	[flex-direction] , [flex-wrap]	是 flex-direction属性和  flex-wrap属性的简写形式， 默认值为 row nowrap

flex-flow	[flex-direction] , [flex-wrap]	是 flex-direction属性和  flex-wrap属性的简写形式， 默认值为 row nowrap
justify-content	flex-start, flex-end, center, space-between, space-around	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
align-items	flex-start, flex-end, center, baseline, stretch	设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
子元素属性
属性名	属性值	备注
order	[int]	默认情况下flex order会按照书写顺训呈现， 可以通过order属性改变， 数值小的在前面，还可以是负数。
flex-grow	[number]	设置或检索弹性盒的扩展比率, 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间
flex-shrink	[number]	设置或检索弹性盒的收缩比率, 根据弹性盒子元素所设置的收缩因子作为比率来收缩空间
flex-basis	[length], auto	设置或检索弹性盒伸缩基准值
align-self	auto,flex-start,flex-end,center,baseline,stretch	设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式， 可以覆盖父容器align-items的设置