微信小程序flex布局基础详解

wxml:

<!--index.wxml-->
<view class="container">
  <view class='item'>1</view>
  <view class='item'>2</view>
  <view class='item i3'>3</view>
  <view class='item'>4</view>
</view>

wxss:

/**index.wxss**/
.container{
  height: 800rpx;
  width: 100%;
  background-color:royalblue; 
   display: flex;/*开始布局 容器属性 */
   /*flex-direction: column; 决定元素的排列方向 竖轴  */
   /*flex-direction: row;默认横向轴 */
   /*flex-wrap: nowrap; 决定元素如何换行 默认不换行 */
   /*flex-wrap: wrap-reverse;换行反转 */
   /*flex-wrap: wrap;默认换行 */
   flex-flow: row wrap;/* flex-direction和flex-wrap的简写 */
   justify-content: center;  /*元素在主轴上的对齐方式 center水平居中    */
   /* justify-content: flex-start;默认 */
   /* justify-content: flex-end; 右对齐 */
   /* justify-content: space-around;每一个view之间的间隔相等 */
   /* justify-content: space-between;两端对齐中间每一个view之间的间隔相等 */
   align-items:flex-start; /*元素在交叉轴上的对齐方式 默认  */
   /* align-items: flex-end;在底部展示 */
   /* align-items: center;垂直居中 */
   /* align-items: stretch;如果子元素没有高度 自动占满整个view的高度 */
   /* align-items: baseline; 以文字对齐  */

}
.item{
  width: 100rpx;
  height: 100rpx; 
  background-color:red;
  border: 1px solid #000; 
  /* flex-grow:1;  当有多余空间的时候 元素的放大比例 默认值：0； 当前占1份  */
  /* flex-shrink: 1; 当没有多余空间的时候 元素的等比例缩小 默认值：1；*/
  order: 3
}
.i3{
  display: flex;
  align-items: flex-end;
  /* flex-grow:2;  当有多余空间的时候 元素的放大比例 占2份  */
  /* flex-shrink: 0;不缩小 */
  /* flex-basis: 250rpx;当前元素在主轴上占据的空间 */
  /* flex: 0 1 50rpx;以上三种的简写 */
  /* order: 1; 定义元素的排列顺序 / */
  /* align-self: flex-end;定义元素自身的对齐方式 */
}