小程序开发——布局

小程序的布局分为两类：横向布局和纵向布局

• 横向布局
  从左到右
  如：
  .wxss文件
  .rowLayout {
  display: flex;
  flex-direction: row;
  }
  .wxml (views是我在.json定义的数组，有四个元素)
  
  
  
  
  
  效果图如下：
  
  display: flex;这句的作用：当布局超过屏幕时（因为是横向布局，所以这里指屏幕的宽），平均分布，width这个属性设置更大的值的时候，都会无效。例如我把views这个数组改成只有两个元素，其他的都不变的时候，效果就变成了下图
  
• 纵向布局
  从上到下
  如：.wxss文件
  .rowLayout {
  display: flex;
  flex-direction: column;
  }
  .wxml (views是我在.json定义的数组，有四个元素)
  
  
  
  
  
  效果图如下：
  
  下面再为大家介绍几种常用的布局效果
• 水平居中
  .rowcenter {
  justify-content: center;
  display: flex;
  }
• 垂直居中
  .columncenter {
  align-items: center;
  display: flex;
  }
• 水平垂直居中
  .row-column-center {
  display: flex;
  justify-content: center;
  align-items: center;
  }
• 底部悬浮按钮
  .bottom-button {
  position: fixed;
  bottom: 0;
  height: 45px;
  width: 100%;
  }
• 左-中-右布局
  //首先，要一个view把左中右囊括起来
  .location {
  margin-left: 20px;
  margin-top: -70px;
  height: 100px;
  align-items: center;
  display: flex;
  }
  //这是左边的样式
  .location-left {
  margin-left: 5px;
  width: 60px;
  }
  //这是中间的样式
  .location-center {
  flex: 1;
  margin-right: 0px;
  overflow: hidden; /自动隐藏文字/
  text-overflow: ellipsis; /文字隐藏后添加省略号/
  white-space: nowrap; /*强制不换行/
  }
  //这是右边的样式
  .location-right {
  padding-right: 5px;
  }