微信小程序布局基础

• flex布局基础
  
  • flex的容器和元素
  • flex的容器属性详解
  • flex元素属性详解
• 相对定位和绝对定位
  
  • 理解相对定位和绝对定位
  • 相对定位、绝对定位的编码

flex布局基础

flex的容器和元素

默认从左到右的轴叫主轴（main axis），从上到下的轴叫侧轴（cross axis），也叫交叉轴。黄色背景部分就是容器。

flex的容器属性详解

• flex-direction决定元素排列方向
• flex-wrap决定元素如何换行（排列不下时）
• flex-flow 是 flex-direction和flex-wrap的简写
• justify-content决定元素在主轴上的对齐方式
• align-items决定元素在交叉轴的对齐方式

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

.container {
  height : 100%;
  width:100%;
  background-color: khaki;
  display: flex;
  flex-direction: row;
}
.item {
  width:100rpx;
  height:100rpx;
  background-color: seagreen;
  border: 1px solid #fff;
}

flex-direction

/* flex-direction有两种方向，默认为row，还有一种为column */
flex-direction: column;

当设置为column时，实际上我们是把容器从上到下当作主轴，从左到右当做交叉轴。

flex-wrap

当在主页添加多个view时，如果不设置flex-wrap且默认方向为row时，各个item就会排在一行内，而放不下时就会导致变形。

flex-wrap : wrap;

* flex-wrap : nowrap; 不换行
* flex-wrap : wrap;换行
* flex-wrap : wrap-reverse;反转

flex-flow

flex-flow: row wrap; 

justify-content

.container {
  height : 100%;
  width:100%;
  background-color: khaki;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

  display: flex;
  flex-direction: column;   /* 主轴改为从上往下了 */
  justify-content: center;  /* 主轴上的对齐方式 */

当从左到右的轴为主轴时：
flex-start 主轴左对齐

flex-end 主轴右对齐

center 居中对齐

space-around 每个item左右两边间隔相等

space-between 最左和最右不留间隔

align-items

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

  justify-content: flex-start;  /* 默认的主轴上对齐方式 */
  align-items: flex-start;

当从上到下的轴为交叉轴时：
flex-start 上对齐

flex-end 下对齐

center 居中对齐

stretch 当元素没有设置固定高度时，自动让元素的占满整个容器的高度
如果不给每个item设置固定高度，效果如下：

baseline 以文字的基线进行对齐
给第三个view单独设置一个样式

<view class="item i3">3</view>

.i3 {
  display: flex;
  align-items: flex-end;
}

flex元素属性详解

flex元素的属性只能用在每个 flex item里面，是无法用在container里面的。
* flex-grow 当有多余空间时，元素的放大比例
* flex-shrink 当空间不足时，元素的缩小比例
* flex-basis 元素在主轴上占据的空间
* flex 是grow shrink basis的简写
* order 定义元素的排列顺序
* align-self定义元素自身的对齐方式

.item {
  width:100rpx;
  height:100rpx; 
  background-color: seagreen;
  border: 1px solid #fff; 
  flex-grow: 1;
}

flex-grow 默认值为0

.item {
  width:100rpx;
  height:100rpx; 
  background-color: seagreen;
  border: 1px solid #fff; 
  flex-grow: 1;
}
.i3 {
  display: flex;
  align-items: flex-end;
  flex-grow: 2; 
}

item1、2、4占据多余空间的一份，item3占据多余空间的两份

flex-shrink 默认值为1，当空间不足时，各item等比缩小

将第三个元素单独设置样式为flex-shrink: 0，则该元素不缩小：

.i3 {
  display: flex;
  align-items: flex-end;
  /* flex-grow: 2;  */
  flex-shrink: 0;
}

.i3 {
  display: flex;
  align-items: flex-end;
  /* flex-grow: 2;  */
  flex-shrink: 5;
}

flex-basis

.i3 {
  display: flex;
  align-items: flex-end;
  flex-basis: 150px;
}

order

.item {
  width:100rpx;
  height:100rpx; 
  background-color: seagreen;
  border: 1px solid #fff; 
  order: 3;
}
.i3 {
  display: flex;
  order: 1;
}

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

align-self

.container {
  min-height : 100%;
  width:100%;
  background-color: khaki;
  display: flex;
  flex-direction: row;
  justify-content: flex-start; 
  align-items: flex-start;
}

.i3 {
  display: flex;
  align-self: flex-end;   /* item3 设置为和其他不同的对齐方式 */
}

.i3 {
  display: flex;
  align-self: center;   
}

相对定位和绝对定位

理解相对定位和绝对定位

相对定位的元素是相对自身进行定位，参照物就是自己
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位

相对定位、绝对定位的编码

 <view class="item3" >3</view>

.item3 {
  width:100rpx;
  height:100rpx; 
  background-color: seagreen;
  border: 1px solid #fff; 
  position: relative;
  left: 50rpx;   /* 相对原来的自己进行偏移 */
  top: 50rpx;
}

.container {
  min-height : 100%;
  width: 100%;
  background-color: khaki;
  position: absolute;
  left: 100rpx;
  top: 100rpx;
}
.item3 {
  width:100rpx;
  height:100rpx; 
  background-color: seagreen;
  border: 1px solid #fff; 
  position: absolute;   /* 离它最近的已定位的父级元素是container */
  left: 50rpx;
  top:50rpx;
}

.container {
  min-height : 100%;
  width:100%;
  background-color: khaki;
  margin-left: 100rpx;
  margin-top:100rpx;
}
.item3 {
  width:100rpx;
  height:100rpx; 
  background-color: seagreen;
  border: 1px solid #fff; 
  position: absolute;  /* 离它最近的已定位的父级元素是整个page，因为container没有定位 */
  left: 50rpx;
  top:50rpx;
}