微信小程序页面布局方式 (react native也可以用)-温故而知新
微信小程序使用flexbox容器,flexbox布局由伸缩容器和伸缩项目组成。任何一个元素都可以指定为flexbox布局,其中设为display:flex或者display:inline-flex的元素称为伸缩容器。伸缩容器的子元素称为伸缩项目,伸缩项目使用伸缩布局模型来排版。伸缩布局模型与传统的布局不一样,它按照伸缩流的方向布局。请看下面的经典图片
默认情况下,伸缩容器由两根轴组成,主轴(main)和交叉轴(cross),其中主轴的开始位置叫main start,结束位置叫main end。交叉轴的开始位置叫cross start,结束位置叫cross end 。伸缩项目的主轴上的占据空间叫main axis,在交叉轴上的占据位置叫cross axis,根据设置情况的不同。主轴既可以是水平轴,也可以是垂直轴。不论哪个轴作为主轴,默认情况下伸缩项目总是沿着主轴,从主轴开始位置到主轴结束位置进行排版,flexbox在浏览器使用需要加上各个浏览器的私有前缀,-webkit,-moz,-ms,-o,微信小程序全部去掉前缀。 伸缩容器支持的属性有: 1,display 2,flex-direction 3,flex-wrap 4,flex-flow 5,justify-content 6,align-items 7,align-content 8,order 9,flex-grow 10,flex-basis 11,flex 12,align-self 主要介绍这几个属性 display该属性用来指定元素是否为伸缩容器,语法为 display:flex | display:inline-flex wxml代码为: <view class="container"> wxss代码为 .container{ flex:用于产生块级伸缩容器 .container{ inline-flex:用于产生行内级伸缩容器,
flex-direction该属性用于指定主轴方向,语法为 flex-direction: row | row-reverse | column | column-reverse 1)row水平方向从左向右
2)row-reverse水平方向从右向左
4)column伸缩容器为垂直方向,伸缩项目的排版方式为从上到下
5)column-reverse伸缩容器为垂直,伸缩项目为从下到上
flex-wrap该属性用来指定伸缩容器的主轴线方向空间不足的情况下,是否换行以及该如何换行 flex-wrap: nowrap | wrap | wrap-reverse 1)nowrap空间不足是也不换行
2)wrap空间不足可以换行
3)wrap-reverse空间不足可以换行,若主轴为水平轴,则换行的方向为从下到上,和wrap相反
flex-flow该属性是flex-direction和flex-wrap属性的缩写版本,它同时指定了伸缩容器的主轴和侧轴,其默认属性为row nowrap flex-flow: flex-direction | flex-wrap
justify-content该属性用来定义伸缩项目沿主轴线的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around 1)flex-start伸缩项目向主轴线的起始位置靠齐
2)flex-end 伸缩项目向主轴线的结束位置对齐,
3)center伸缩项目向主轴线的中间位置靠齐
4)space-around伸缩项目会平均的分布在主轴线里,两端保留一半的空间。
5)space-between伸缩项目会平分在主轴线里,第一个伸缩项目在主轴线的开始位置,最后一个伸缩项目在主轴线的终点位置
align-items该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式 align-items: flex-start | flex-end | center | baseline | stretch; 1)flex-start伸缩项目沿交叉轴的起始位置对齐
2)flex-end沿交叉轴的结束位置对齐
3)center伸缩项目沿交叉轴的中间位置靠齐
4)baseline伸缩项目根据它们的基线对齐
5)stretch伸缩项目在交叉轴方向拉伸填充整个伸缩容器
|