目录
一.布局基础
flex布局 ( display:flex )
1.flex的容器元素
2.flex容器属性
| 属性名称 | 作用 | 取值 |
| flex-direction | 决定元素的排列方向 | colum、row(默认) |
| flex-wrap | 决定元素如何换行(排列不下时候) | warp、nowarp(默认)、warp-reverse |
| flex-flow | flex-direction和flex-wrap的简写 | 略 |
| justify-content | 元素在主轴上的对齐方式 | center、flex-start、flex-end、space-around、space-between ...... |
| align-items | 元素在交叉轴上的对齐方式 | flex-start(默认)、flex-end、center、stretch、baseline ...... |
TIPS：
flex-direction 决定了主轴和交叉轴，colum→从上到下是主轴；row→从左到右是主轴
flex-flow 是简写，属性值中间用空格连接
效果图：
2.1 flex-direction
display: flex;
flex-direction: row;
display: flex;
flex-direction: column;
2.2 flex-wrap
display: flex;
flex-wrap: wrap;
display: flex;
flex-wrap: nowrap;
display: flex;
flex-wrap: wrap-reverse;
2.3 justify-content
display: flex;
justify-content: center;
display: flex;
justify-content: flex-end;
display: flex;
justify-content: flex-start;
display: flex;
justify-content: space-around;
display: flex;
justify-content: space-between;
2.4 align-items
display: flex;
justify-content: space-between;
align-items: flex-start;
display: flex;
justify-content: space-between;
align-items: flex-end;
//以第一行文字对齐,给第三个小方块加了特效
display: flex;
justify-content: space-between;
align-items: baseline;
此时再将align-items设为flex-start，可以清晰的观察出其本质区别
3.flex元素属性
| 属性名称 | 作用 | 取值 |
| flex-grow | 当有多余空间时，元素的放大比例 | 0(默认)...其余数值(放大倍数) |
| flex-shrink | 当空间不足时，元素的缩小比例 | 1(默认)...其余数值(缩小倍数) |
| flex-basis | 元素在主轴上占据的空间 | 数值,单位px |
| flex | grow、shrink、basis的简写 | 略 |
| order | 定义元素的排列顺序 | 1 2 3 4...顺序数值 |
| align-self | 定于元素自身的对齐方式 | flex-start、flex-end、center |
3.1 flex-grow
flex-grow: 1;
.item{
flex-grow: 1;
}
.item2{
flex-grow: 2;
}
3.2 flex-shrink
flex-shrink: 1;
.item{
flex-shrink: 1;
}
.item2{
flex-shrink: 0;
}
3.3 flex-basis
flex-basis: 200px;
3.4 flex
flex: 1 1 50px;
3.5 order
<view class='container'>
<view class='item' style='order:2'>1</view>
<view class='item' style='order:3'>2</view>
<view class='item' style='order:4'>3</view>
<view class='item' style='order:1'>4</view>
</view>
3.6 align-self
.container{
...
align-items: flex-start;
}
.item{
...
}
.item2{
align-self: flex-end;
}
4.相对布局
精髓：相对定位的元素是相对自身进行定位的，参照物是自己
/* 为第二个元素设置了特殊样式 */
position: relative;
left:50rpx;
top:70rpx;
5.绝对布局
精髓：绝对定位的元素是相对离它自己的一个已定位的父级元素定位的
/* 为第二个元素设置了特殊样式 */
position:absolute;
left:50rpx;
top:70rpx;
<view class='container'>
<view class='item'>1</view>
<view class='item2'>2</view>
<view class='item'>3</view>
<view class='item'>4</view>
</view>
//!!!当父级元素也没有定位，就以整个页面为参照
/*当父级元素已经定位了*/
.container{
position: absolute;
left: 80rpx;
top:100rpx
}
/* 为第二个元素设置了特殊样式 */
.item2{
position:absolute;
left:50rpx;
top:70rpx;
}
谢谢浏览，如有错误烦请指正，喵喵喵~ (≧∀≦)ゞ