小程序布局flex

作为android程序员，写布局用惯了android提供的布局，开始写小程序布局的时候，怎么写怎么不顺心，一度都要放弃了，死去活来的终于摸到了前端写布局的一点门道，先记录下来

小程序用的最多的该是flex布局了吧

flex

.class_name{
  display: flex;
}

使用很简单，就是这样就行了，先来看看这个布局的一些属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1.flex-direction属性
它表示子控件排列的方向，有4个值

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2. justify-content属性
它表示子控件排列方向上的对齐方式，有5个值

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3 align-items属性
它可能取5个值。决定垂直于排列方向的对齐方式

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

4 align-content属性
它决定排列方向有多排的时候，多排的对齐方式

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

接下来讲几种常用的布局怎么用flex实现吧

垂直居中，水平居中，宽高全屏

.container{
  width: 100%;
  height: 100vh;
  background-color: #eeeeee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.logo{
  width: 100%;
  height: 100rpx;
  max-width: 100%;
  
}

.logo_name{
  width: 100%;
 margin-top: 20rpx;
  font-size: 40rpx;
  line-height: 36rpx;
  color: #666;
  text-align: center;
}

.logo_layout1{
  display: flex;
  flex-direction: column;
  justify-content:center;
}

xml如下

<view class='container'>
  <view class='logo_layout1'>
    <image class='logo' src='../../images/crap.png' mode='aspectFill'></image>
    <text class='logo_name' mode="aspectFit">抓螃蟹</text>
  </view>
</view>

效果如下：