微信小程序——UI精讲

view-flex

1.flex-direction

flex-direction有两个属性，默认属性flex-direction-row从左到右，flex-direction-row-reverse从右往左。
flex-direction: column从上往下，flex-direction: column-reverse从下往上。

.container{
  height: 100%;
  width:100%;
  background-color:aqua;
    display: flex; /*默认row属性交叉轴从左往右*/ 
  /* flex-direction: column-reverse;从下往上 */
  /* flex-direction: column; 从上往下*/
  /* flex-wrap: wrap;上方拆开排列 */
  /* flex-wrap: wrap-reverse;下方拆开排列 */
}

下方拆开排列

我在对View视图容器进行格式背景颜色定义background-color。定义完只有内容填充才显示背景颜色。其中对高height：100%，width：100%。解决办法是对上级目录pages进行定义高度height：100%。

flex布局内容不能填充背景，说明是浮动在View上

这里是对pages配置过

  page{ 
  height: 100%
}

flex-flow是flex-direction和flex-wrap的简写

justify-content

justify-content，主轴上的对齐方式，有五个属性
justify-content-center/ flex-start/flex-end/space-around/space-between，居中/左对齐（默认）/右对齐/分散对齐（等距）/两端对齐

主轴和交叉轴

两端对齐

分散对齐

align-items

align-items交叉轴对齐方式，有六个属性。
align-items：flex-start/flex-end/center/stretch/baseline,顶部对齐/底部对齐/居中对齐/（元素没有定义高都占满整个容器交叉轴方向）填充/元素文字对齐

顶部对齐

底部对齐

居中

填充

元素文字对齐

flex-grow:

flex-grow:当有多余空间时，元素的放大比例
flex-grow:0；不放大 flex-grow:1；放大各占取一份

放大各占取一份

flex-grow:2占取了两份

flex-shrink

flex-shrink 空间不足时按比例缩小，默认 flex-shrink:1不缩小。随着数值增大缩小。

flex-shrink:1不缩小

flex-shrink:2

flex-basis

flex-basis元素在主轴上占据的空间，由于微信的解析程度不够导致flex-basis失效，故这里不用rpx，而是px

.i3{
 display: flex;
  align-items: flex-end;
  /* flex-grow:2; */
  flex-shrink:1;
  flex-basis: 150px;
}

对比1

.i3{
 display: flex;
  align-items: flex-end;
  /* flex-grow:2; */
  flex-shrink:1;
  flex-basis: 10px;
}

对比2

flex

flex是grow shrink basis 的简写

flex: 0 1 150px; 实例1

实例1

flex:2 1 50px 实例2

实例2

order

order定义元素的排列顺序

<view class='container'>
    <view class='item1' style='order:2'>1</view>
   <view class='item1' style="order:1">2</view> 
    <view class='item1 i3'style="order:4">3</view> 
     <view class='item1'style="order:3">4</view>
    
</view>

order元素排列

align-self

align-self定义元素自身对齐方式

.i3{
 display: flex;
  /* align-items: flex-end; */
  /* flex-grow:2; */
  /* flex-shrink:1;
  flex-basis: 10px; */
  /* flex: 2 1 50px; */
  align-self:flex-end;
}

align-self:flex-end