css3的flex布局
最近在撸小程序,只在微信里面运行,不用考虑其他浏览器的兼容性,flex布局超级好使,在这里总结一波。
只要在支持flex布局的浏览器下声明display:flex
即可,在这个容器下的子元素就会自动成为容器的成员。容器有6个属性,分别是
flex-direction
,flex-wrap
,flex-flow
,justify-content
,align-items
,align-content
flex-direction属性
flex-direction
属性控制子元素的排列方向
flex-direction: row | row-reverse | column | column-reverse;
四个属性值表现如下
row
(默认值):水平方向排列,起点在左端。row-reverse
:水平方向排列,起点在右端。column
:垂直方向排列,起点在上沿。column-reverse
:垂直方向排列,起点在下沿。