小程序之基础布局flex

flex布局

• 初始布局

<view class="container">
  <view class='item'>1</view>
  <view class='item'>2</view>
  <view class='item'>3</view>
  <view class='item'>4</view>
</view>

page, .container{
  height: 100%;
  width: 100%;
  background-color: #ccc;
} 
.item{
  width: 100rpx;
  height: 100rpx;
  background: #fff;
  border: 1px solid #ccc;
}

====================================

• 排列方式

给父元素添加display: flex;之后，会形成如下布局：

布局方向有横向和纵向两种，设置了flex后子元素默认横向排列
横向：flex-direction: row;
纵向：flex-direction: column;

row横向为主轴，纵向为交叉轴，
column纵向为主轴，横向为交叉轴。

====================================

当子元素过多时,会形成下面的样子：

  flex-wrap: nowrap;  //默认不换行
  flex-wrap: wrap;  //挤下去
  flex-wrap: wrap-reverse;  //反转

//flex-direction和flex-wrap的简写
flex-flow: row wrap;

====================================

• 元素在主轴上的对齐方式

  justify-content: center; 
  justify-content: flex-start; 
  justify-content: flex-end; 
  justify-content: space-around;
  justify-content: space-between;

• 元素在交叉轴上的对齐方式

  align-items: center;
  align-items: flex-start;
  align-items: flex-end;
  align-items: stretch;
  /*元素不设置高度时，拉伸至最大高度*/
  align-items: baseline; /*基线对齐*/

• 定义元素自身的对齐方式

align-self: center;

• 比例

  flex-grow: 1;  //空间富裕时，放大每个子元素后各自所占的比例
  flex-shrink: 1; //空间不足时，缩小每个子元素后各自所的比例
  flex-basis: 300rpx; //元素在主轴上所占空间

====================================

• 排序

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

=================END===================

• github：https://github.com/webxing
• 简书：https://www.jianshu.com/u/489662a091fd