小程序之flex布局
封面
Flex 布局
Flex 是 Flexible Box 的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。
先来看下这张图片
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素
flex容器属性
flex-direction 决定元素的排列方向
flex-direction有四个值
row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
wxml文件
<view class="container">
<view class="item">
1
</view>
<view class="item">
2
</view>
<view class="item">
3
</view>
<view class="item">
4
< /view>
</view>
wxss文件
.container{
height: 100%;
width: 100%;
background-color: red;
display: flex;
flex-direction: row;
}
.item{
width: 150rpx;
height: 150rpx;
background-color: yellow;
}
wxss文件
.container{
height: 100%;
width: 100%;
background-color: red;
display: flex;
flex-direction: column
}
修改flex-direction: column后的效果:
flex-wrap 决定元素如何换行
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
wxml文件
<view class="container">
<view class="item">
1
</view>
<view class="item">
2
</view>
<view class="item">
3
</view>
<view class="item">
4
</view>
<view class="item">
5
</view>
<view class="item">
6
</view>
<view class="item">
7
</view>
<view class="item">
8
</view>
</view>
wxss文件
.container{
height: 100%;
width: 100%;
background-color: red;
display: flex;
}
.item{
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid #fff;
}
修改flex-wrap: wrap的效果:
修改flex-wrap: wrap-reverse的效果:
flex-flow flex-direction和flex-wrap的简写
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content 元素在主轴上的对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，元素之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍
wxml文件
<view class="container">
<view class="item">
1
</view>
<view class="item">
2
</view>
<view class="item">
3
</view>
<view class="item">
4
< /view>
</view>
wxss文件
.container{
height: 100%;
width: 100%;
background-color: red;
display: flex;
justify-content: space-around;
}
修改flex-end的效果
align-items 元素在交叉轴上的对齐方式
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 元素的第一行文字的基线对齐
stretch（默认值）：如果元素未设置高度或设为auto，将占满整个容器的高度
wxml文件
<view class="container">
<view class="item">
1
</view>
<view class="item">
2
</view>
<view class="item i3">
3
</view>
<view class="item">
4
</view>
</view>
wxcss文件
.item{
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid #fff;
}
.container{
height: 400rpx;
width: 100%;
background-color: red;
display: flex;
align-items: flex-end;
}
修改baseline并且添加i3的样式
.i3{
display: flex;
align-items: center;
}
flex-grow 当有多余控件时，元素的放大比例
默认为0，即如果存在剩余空间，也不放大
如果所有元素的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个元素的flex-grow属性为2，其他元素都为1，则前者占据的剩余空间将比其他元素多一倍。
wxml文件
<view class="container">
<view class="item">
1
</view>
<view class="item">
2
</view>
<view class="item i3">
3
</view>
<view class="item">
4
</view>
</view>
wxss文件
.container{
height: 400rpx;
width: 100%;
background-color: red;
display: flex;
flex-grow: 1;
}
.item{
width: 50rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid #fff;
}
.i3{
flex-grow: 2;
}
flex-shrink 当空间不足时，元素的缩小比例
默认为1，即如果空间不足，该元素将缩小
如果所有元素的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个元素的flex-shrink属性为0，其他元素都为1，则空间不足时，前者不缩小。和flex-grow用法基本一致
flex-basis 元素在主轴上占据的空间
它可以设为跟width或height属性一样的值（比如350px），则元素将占据固定空间。
flex 是grow shrink basis的简写
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
flex: 0 1 50px
order 定义元素的排列顺序
数值越小，排列越靠前，默认为0。
wxml文件
<view class="container">
<view class="item">
1
</view>
<view class="item">
2
</view>
<view class="item i3">
3
</view>
<view class="item">
4
</view>
</view>
wxss文件
.container{
height: 400rpx;
width: 100%;
background-color: red;
display: flex;
}
.item{
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid #fff;
}
.i3{
order: 1;
}
align-self 定义元素自身的对齐方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
除了auto，其他都与align-items属性完全一致
wxml文件
<view class="container">
<view class="item">
1
</view>
<view class="item">
2
</view>
<view class="item i3">
3
</view>
<view class="item">
4
</view>
</view>
wxss文件
.container{
height: 400rpx;
width: 100%;
background-color: red;
display: flex;
}
.item{
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid #fff;
}
.i3{
align-self: center;
}
相对定位和绝对定位
相对定位
相对定位的元素是相对自身进行定位，参照物是自己
position: relative
wxml文件
<view class="container">
<view class="item">
1
</view>
<view class="item">
2
</view>
<view class="item i3">
3
</view>
<view class="item">
4
</view>
</view>
wxss文件
.container{
height: 100%;
width: 100%;
background-color: rebeccapurple;
}
.item{
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid #fff;
}
.item2{
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid #fff;
}
对选择器.item2修改
.item2{
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid #fff;
position: relative;
left: 150rpx;
top: 50rpx;
}
绝对定位
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位
position: absolute
对选择器.item2修改
.item2{
width: 150rpx;
height: 150rpx;
background-color: yellow;
border: 1px solid #fff;
position: absolute;
left: 150rpx;
top: 50rpx;
}
本人是从事iOS工作，目前正在学习web。欢迎指正，非常感谢。
参考文献：阮一峰的网络日志
