微信小程序篇】七.UI精讲之布局基础 flex布局和相对绝对定位

布局基础

flex布局

1. flex容器和元素

设置Flex container 改变主轴和交叉轴的关系

2. flex容器的属性

flex-direction 决定元素的排序方向
flex-wrap 决定元素如何换行（行满的时候）
flex-flow 上2者简写
justify-content 元素在主轴上的对齐方式
align-items 元素在交叉轴上的对齐方式

3. flex元素的属性（用于元素里面）

flex-grow 当有多余空间时，元素的放大比例
flex-shrink 当空间不足时，元素的缩小比例
flex-basis 元素在主轴上占据的空间
flex 上三者简写
order 定义元素的排序顺序
align-self 定义元素自身的对齐方式，会复写掉justify-content 和 align-items

项目准备

1. 创建项目demo6-ui
2. 将index和logs目录删除，新建layout目录
3. 在app.json中配置页面入口
4. 写layout.wxml

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

5. 写layout.wxss

   page{
     height: 100%;
     width: 100%;
   }
   .pageBody{
     height: 100%;
     width: 100%;
     background-color: #c3f3c3;
   }
   
   .item{
     width: 100rpx;
     height: 100rpx;
     background-color: #f3c3f3;
     border: 1px solid #fff;
   }
   

实例

1. flex容器布局

1.1 flex-direction

flex-direction:row 是默认布局，这时候从左到右是主轴，从上到下是交叉轴
flex-direction:column 是竖排，这时候从上到下是主轴，从左到右是交叉轴

1.2 flex-wrap（多添加几个view）

1.3 flex-flow

flex-flow: row wrap

1.4 justify-content

1.5 align-item

2. flex元素布局

2.1 flex-grow（找一个 view class=“item i3”）

2.2 flex-shrink（上面容器不要设置换行，多添加几个view）

2.3 flex-basis

2.4 flex（flex-grow，flex-shrink，flex-basis 简写 ）

flex: 1 1 250rpx;

2.5 order

2.6 align-self

3.相对定位和绝对定位

3.1 相对定位

相对自身进行定位，参照物是自己

3.2 绝对定位

相对离他最近的一个已定位的父级元素进行定位

项目准备

1. 新建position目录
2. app.json配置页面入口
   
3. 写wxml

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

4. 写wxss

   page{
     height: 100%;
     width: 100%;
   }
   .pageBody{
     height: 100%;
     width: 100%;
     background-color: #c3f3c3;
   }
   .item{
     width: 100rpx;
     height: 100rpx;
     background-color: #f3c3f3;
     border: 1px solid #fff;  
   }
   .item2{
     width: 100rpx;
     height: 100rpx;
     background-color: #f3c3f3;
     border: 1px solid #fff;  
   }
   

3.3 案例

3.3.1 相对定位

3.3.2 绝对定位