uniapp框架使用flex布局常用语法汇总

使用flex弹性布局进行项目页面开发，对于重复率较高的flex语法可封装起来，页面统一引用，后续可直接使用。
common.css

.flex{
  display:-webkit-box;
  display:-moz-box;
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flexbox;
  display:flex
}
.flex-full{
  flex: 1
}
.flex-row{
  -webkit-box-direction: normal;
  -webkit-box-orient:horizontal;
  -moz-flex-direction:row;
  -webkit-flex-direction:row;
  flex-direction:row
}
.flex-column{
  -webkit-box-direction:normal;
  -webkit-box-orient:vertical;
  -moz-flex-direction:column;
  -webkit-flex-direction:column;
  flex-direction:column
}
.flex-start{
  -webkit-box-pack:start;
  -moz-justify-content:flex-start;
  -webkit-justify-content:flex-start;
  justify-content:flex-start
}
.flex-center{
  -webkit-box-pack:center;
  -moz-justify-content:center;
  -webkit-justify-content:center;
  justify-content:center
}
.flex-end{
  -webkit-box-pack:end;
  -moz-justify-content:flex-end;
  -webkit-justify-content:flex-end;
  justify-content:flex-end
}
.flex-between{
  -webkit-box-pack:justify;
  -moz-justify-content:space-between;
  -webkit-justify-content:space-between;
  justify-content:space-between
}
.flex-around{
  -webkit-box-pack:around;
  -moz-justify-content:space-around;
  -webkit-justify-content:space-around;
  justify-content:space-around
}
.flex-evenly{
  -webkit-box-pack:evenly;
  -moz-justify-content:space-evenly;
  -webkit-justify-content:space-evenly;
  justify-content:space-evenly
}
.flex-items-start{
  -webkit-box-align:start;
  -moz-align-items:flex-start;
  -webkit-align-items:flex-start;
  align-items:flex-start
}
.flex-items-center{
  -webkit-box-align:center;
  -moz-align-items:center;
  -webkit-align-items:center;
  align-items:center
}
.flex-items-end{
  -webkit-box-align:end;
  -moz-align-items:flex-end;
  -webkit-align-items:flex-end;
  align-items:flex-end
}
.flex-wrap{
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap:wrap
}
.flex-nowrap{
  -webkit-flex-wrap: nowrap;
  -moz-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  -o-flex-wrap: nowrap;
  flex-wrap:nowrap
}

在uniapp项目中App.vue页面引入

<script>
export default{
  onLoad() {

  },
}
</script>
<style>
    @import './common.css'; 
</style>

index.vue页面使用：

<template>
  <view>
      <view class="flex flex-wrap">flex弹性布局</view>
  </view>
</template>