2018年2月

css3的flex布局

最近在撸小程序,只在微信里面运行,不用考虑其他浏览器的兼容性,flex布局超级好使,在这里总结一波。

只要在支持flex布局的浏览器下声明display:flex即可,在这个容器下的子元素就会自动成为容器的成员。容器有6个属性,分别是

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

flex-direction属性

flex-direction属性控制子元素的排列方向

flex-direction: row | row-reverse | column | column-reverse;

四个属性值表现如下

  • row(默认值):水平方向排列,起点在左端。
  • row-reverse:水平方向排列,起点在右端。
  • column:垂直方向排列,起点在上沿。
  • column-reverse:垂直方向排列,起点在下沿。

- 阅读剩余部分 -