[微信小程序]所谓布局

好记性不如烂笔头

小程序布局大多以flex为主，即flexible box 弹性盒子，所以在此记录以作备忘。
不轻视任何一个知识点，我相信：心有所敬，必有所得！

创建三个view，分别给予相同宽高不同颜色用于区分，因为view是块状元素，系统会默认按照如下进行排列

默认效果

用一个容器把这三个view包裹起来，并在wxss中设置该容器display: flex，就可把该容器转换为flex弹性盒子布局。与之一起使用的属性有

1. flex-direction 设置主轴方向

flex-direction: row横向排列（默认）
flex-direction: row-reverse横向倒叙排列
flex-direction: column纵向排列
flex-direction: column-reverse纵向倒叙排列
效果如下，灰色为容器背景颜色

flex-direction: row横向排列（默认）

flex-direction: row-reverse横向倒叙排列

flex-direction: column纵向排列

flex-direction: column-reverse纵向倒叙排列

2. justify-content 设置主轴对齐方式

justify-content: flex-start以起始点对齐
justify-content: flex-end以结束点对齐
justify-content: center居中对齐
justify-content: space-around等距分布
justify-content: space-between两边和居中分布
justify-content: space-evenly平均分布
效果如下，以flex-direction: column;为例

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-around

justify-content: space-between

justify-content: space-evenly

3. align-items 设置交叉轴方向

align-items: flex-start起始点对齐
align-items: flex-end结束点对齐
align-items: center中心对齐
align-items: baseline以文字基线对齐
align-items: inherit子元素充满容器高度(子元素不设置高度)
效果如下，以flex-direction: row; justify-content: center;为例

align-items: flex-start

align-items: flex-end

align-items: center

align-items: baseline

align-items: inherit

4. flex-wrap 换行

如果子元素的的排列总宽度大于屏幕宽度时，此属性可以让子元素换行排列
flex-wrap: wrap换行
flex-wrap: wrap-reverse 倒叙换行flex-wrap: nowrap不换行效果如下，以flex-direction: row;justify-content: flex-start;align-items: flex-start;`为例

flex-wrap: wrap

flex-wrap: nowrap

注意：如果设置为flex-wrap: nowrap不换行时，如果容器的高度大于换行后子元素总高度，换行后的元素则会存在间距

不换行时，容器高度较大情况

wxml文件

<view class="container">
  <view class="view color1">1</view>
  <view class="view color2">2</view>
  <view class="view color3">3</view>
</view>

wxss文件

.container {
  width: 100%;
  height: 400px;
  background-color: #999;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.view {
  width: 150px;
  height: 100px;
}

.color1 {
  background-color: red;
  font-size: 30rpx;
  color: white;
}

.color2 {
  background-color: green;
  font-size: 40rpx;
  color: white;
}

.color3 {
  background-color: blue;
  font-size: 50rpx;
  color: white;
}

最后编辑于：2018.12.26 15:12:03