布局基础
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
项目准备
- 创建项目demo6-ui
- 将index和logs目录删除,新建layout目录
- 在app.json中配置页面入口
- 写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>
- 写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 绝对定位
相对离他最近的一个已定位的父级元素进行定位
项目准备
- 新建position目录
- app.json配置页面入口
- 写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>
- 写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; }