微信小程序开发之七 —— Flex、Grid与List布局
文章目录
-
- 学习前后
- Flex布局
-
- 容器的属性
- 项目的属性：
- Grid布局
- List布局
学习前后
上一篇：微信小程序开发之六数据绑定与列表渲染
下一篇：微信小程序开发之八 —— swiper、video、map组件与cover效果
Flex布局
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
我们可以在页面的.wxml输入如下代码：
<view class="flex">
<view class="item">JAVA</view>
<view class="item">Python</view>
<view class="item">小程序</view>
<view class="item">CSS</view>
</view>
为了让它们区分地更加明显，我们给它加个背景色，边框，让其居中处理，写在.wxss文件里面。
.item{
background: #1317df;
height: 100px;
text-align: center;
border: 1px solid #1aabe4;
}
结果如下：
现在是上下关系，如果想要弄成左右关系我们需要在给外层结构view组件加display:flex，即flex布局。
.flex{
display: flex;
}
结果如下：
可以看到使用flex布局后就变成了左右关系了，但这样看起来不好看，我们一开始希望的是它能跟前面一样均分，然后让里面的内容也居中就更好了，所以我们要给这四个item的进行修饰一下。
.item{
background: #1317df;
height: 100px;
text-align: center;
border: 1px solid #1aabe4;
display: flex;
flex: 1;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
flex是弹性布局，flex:1这个样式是一个相对概念，这里的相对是指这每个item的宽度之比都为1
我们把CCS去掉，只留3个也是会平均分布的，如果我们想要分别占1/4、1/2、1/4这样的布局又该怎么写呢？
首先是把前面的item改一下：
<view class="flex">
<view class="item1">JAVA</view>
<view class="item2">Python</view>
<view class="item3">小程序</view>
</view>
然后给item1，item2，item3设置flex值时分别设成1,2,1就可以实现1/4、1/2、1/4的占比，其他比例类似
.item1,.item3{
background: #1317df;
height: 100px;
text-align: center;
border: 1px solid #1aabe4;
display: flex;
flex: 1;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
.item2{
background: #1317df;
height: 100px;
text-align: center;
border: 1px solid #1aabe4;
display: flex;
flex: 2;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
结果如下：
flex还有很多知识点，如
容器的属性
- flex-direction：决定主轴的方向（即项目的排列方向），注意main-size的位置和主轴方向一致
.box {
flex-direction：row（row-reverse、column、column-reverse）；
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下
- flex-wrap：换行（如何换行）
.box{
flex-wrap：nowrap（wrap、wrap-reverse）}
- nowrap：不换行.
- wrap：换行，第一行在上方.
- wrap-reverse：换行，第一行在下方.
- justify-content：定义项目在主轴上的对齐方式
.box{
justify-content：flex-start（flex-end、center、space-between、space-around）}
- flex-start（默认值）：左对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等，所有，项目之间的间隔比项目与边框的间隔大一倍
- align-items：定义项目在交叉轴上如何对齐
.box{
align-items：flex-start（flex-end，center、baseline、stretch）}
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline：项目的第一行文字的基线对齐
- algin-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
.box{
align-content：flex-start（flex-end、center、stretch、space-between、space-around）}
- flex-start：与交叉轴的起点对齐。
- flex-end：与交叉轴的终点对齐。
- center：与交叉轴的终点对齐。
- space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
- space-around：每根轴线两侧的间隔都相等。
- stretch（默认值）：轴线占满整个交叉轴。
项目的属性：
- order：定义项目的排列顺序，数值越小，排列越靠前，默认0。
.item{
order：<integer>；}
- flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item{
flex-grow：<number>；}
-
flex-shrink：定义了项目的缩小比例，默认为1，即空间不足，该项目缩小，如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小，如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小，负数对该属性无效。
-
flex-basis：定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，即项目的本来大小。
-
align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等于stretch.
大家感兴趣的话可以自己找资料学一下。
Grid布局
小程序对于gird布局好像有部分不兼容问题，所以推荐使用flex布局替代。
Flex布局：轴线布局，可以看做是一维布局。
Grid布局：则是将容器划分分成“行”和“列”，产生单元格，指定的项目所在的单元格，可以看做是二维布局。
-
grid-template-columns/row 属性
- columns 是定义了每一列的宽
- row 是定义了每一行的高
-
repeat() 两个参数 (重复n次，重复的值)
-
grid-row-gap属性，grid-columns-gap
- grid-row-gap设置行与行的间隔（行间距）
- grid-columns-gap设置列与列的间隔（列间距）
-
justify-items，align-items，place-items 属性
- justify-items 设置单元格内容的水平位置
- align-items 设置单元格内容的垂直位置
.wxml
<view class="page__bd">
<view class="weui-grids">
<block wx:for="{
{grids}}" wx:for-item="grid" wx:key="*this">
<navigator url="" class="grid" hover-class="grid_active">
<image class="weui-grid_icon" src="{
{grid.imgurl}}" style="height:28px;width:28px;" />
<view class="weui-grid_label">{
{
grid.title}}</view>
</navigator>
</block>
</view>
</view>
.js
grids: [
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon1.png",
title: "招聘"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon2.png",
title: "房产"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon3.png",
title: "二手车"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon4.png",
title: "二手"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon5.png",
title: "招盟"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon6.png",
title: "兼职"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon7.png",
title: "本地"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon8.png",
title: "家政"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon9.png",
title: "夺宝"
},
{
imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon10.png",
title: "送现金"
},
]
.wxss
.weui-grids{
width:320px;
height: 320px;
display: grid;
grid-template-columns: repeat(3,30%);
grid-template-rows: repeat(3,30%);
grid-column-gap: 20px;
grid-row-gap: 20px;
align-items: center;
justify-content: center;
justify-items: center;
background-color: #27dbf3;
}
.weui-gird_label,.weui-gird_icon{
align-items: center;
justify-content: center;
justify-items: center;
}
.weui-grid_label{
text-align:center;
font-size:14px;
}
结果：
感觉九宫格这个写得还不是很好。
List布局
啊啊啊，算了，咕掉了，以后学会再回来补充吧，找不到资源了。。。