微信小程序页面布局方式 (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">

  <view class="sp1">1</view>

  <view class="sp2">2</view>

  <view class="sp3">3</view>

  <view class="sp4">4</view>

  <view class="sp5">5</view>

  <view class="sp6">6</view>

  <view class="sp7">7</view>

  <view class="sp8">8</view>

  <view class="sp9">9</view>

</view>

wxss代码为

.container{

display: flex;

}

flex:用于产生块级伸缩容器

.container{

display: inline-flex;

}

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伸缩项目在交叉轴方向拉伸填充整个伸缩容器

align-content

用来调整伸缩项目出现换行后在交叉轴上的对齐方式，类似于伸缩项目在主轴上使用justify-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch

1)flex-start伸缩项目向交叉的起始位置靠齐



2)flex-end伸缩项目向交叉轴的起始位置靠齐



3)center伸缩项目向交叉轴的中间位置靠齐



4)space-between伸缩项目在交叉轴中平均分布



5)space-around伸缩项目在交叉轴平均分布，且两边各有一半空间



6)strech伸缩项目将会在交叉轴上伸展以占用剩余空间

order

用于定义排列顺序，数值越小，排列越靠前，默认值为0

flex-grow

用于定义伸缩项目的放大比例，默认值0，即如果存在剩余空间，也不放大，如果所有伸缩项目的flex－grow设置为1，那么每个伸缩项目将设置为大小相等的剩余空间，如果你将其中一个flex－frow伸缩项设置为2，那么这个伸缩项目所占剩余空间是其他伸缩项目所占胜于空间的两倍

flex-shrink

该属性用来定义伸缩项目的收缩能力

flex-basis

该属性用来设置伸缩项目的基准值，剩余空间按比率进行伸缩

flex

该属性是flex-grow ,flex-shrink,flex-basis属性的缩写
flex: none | flex-grow flex-shrink flex-basis

其中第二个参数和第三个参数(flex-shrink,flex-basis)是可选参数，默认为0 1 auto



本例子sp3原属宽度为50px，当是flex：1时，该元素就会把伸缩容器的剩余空间占满，其实质上就等于felx-grow:1
该属性有两个快捷值:auto(1 1 auto)和none(0 0 auto)

align-self

用于设置单独的伸缩项目在交叉轴上的对齐方式，会覆盖默认的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch

1)auto



2)felx-start沿交叉轴开始位置对齐



3)flex-end沿交叉轴结束位置对齐



4)center沿交叉轴中心位置对齐



5)baseline沿交叉轴的基线对齐



6)stretch沿交叉轴方向占满伸缩容器