微信小程序学习笔记（五）

最新推荐文章于 2024-03-15 09:21:40 发布

小刘要努力。

最新推荐文章于 2024-03-15 09:21:40 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

liurunsen

本文链接：https://blog.youkuaiyun.com/weixin_44510615/article/details/89321803

align-content属性在排列中，如果有多行，那么这个属性是设置多行之间的排列方式。可以通过 align-content 属性来确定排列的方式。可以设置以下值。

flex-start ：从上往下排列。示例代码如下：

.outter {
   display: flex;
   flex - wrap: wrap;
   align - content: flex - start;
   width: 300px;
   height: 300px;
   background: pink;
}

在这里插入图片描述

2 flex-end ：末尾段对齐。效果图如下：
在这里插入图片描述
2. center ：中点对齐。效果图如下：

4 space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。效果图如下：

3. space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。效果图如下：
在这里插入图片描述
4. stretch ：默认方式，如果没有给元素设置高度，那么会占满整个交叉轴。

.outter.inner {
    background: gray;
    width: 100px;
    /* height: 100px; */
    border: 1px solid#ccc;
    box - sizing: border - box;
}

效果图如下：
在这里插入图片描述
元素（子容器）的相关属性
flex-basis：
定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间。
.item {
flex-basis: | auto;
}
默认值：auto，即项目本来的大小, 这时候 item 的宽高取决于 width 或 height 的值。

当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flexshrink 配合使用才能发挥效果。

当 flex-basis 值为 0 时，是把该项目视为零尺寸的，故即使声明该尺寸为 140px，也并没有什么用。当 flex-basis 值为 auto 时，则跟根据尺寸的设定值(假如为 100px)，则这 100px 不会纳入剩余空间。 flex-grow：
设置元素是否需要扩大的比例。默认值为0，即如果存在剩余空间，也不放大。比如有以下代码：

<view class='outter'>
  <view class='inner inner1'>1</view>   <view class='inner inner2'>2</view>
</view>

wxss代码为：

outter {
    display: flex;
    width: 300px;
    height: 300px;
    flex - wrap: wrap;

    background: pink;
}.outter.inner {
    background: gray;
    width: 100px;
    height: 100px;
    border: 1px solid#ccc;
    box - sizing: border - box;
}.outter.inner1 {
    flex - grow: 2;
}.outter.inner2 {
    flex - grow: 1;
}

效果图为：
在这里插入图片描述
因为两个元素分别占了2份，1份，所以第一个元素是占据了整个容器宽度的2/3，第二个元素占据了整个容器宽度的1/3。
另外，如果设置 flex-grow 为0，那么他的宽度将会保持为设置的宽度，如果宽度没有设置，那么将根据他的子元素来保留宽度。假如代码为：

<view class='outter'>
  <view class='inner inner1'>1</view>   <view class='inner inner2'>2</view>
</view>

wxss代码为：

.outter.inner1 {
    flex - grow: 0;
}.outter.inner2 {
    flex - grow: 1;
}

效果图为：

如果把 inner1 的 width 删掉，那么效果图为：
在这里插入图片描述
flex-shrink属性：
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。比如有以下代码：

<view class='outter'>
  <view class='inner inner1'>1</view>
  <view class='inner inner2'>2</view>
  <view class='inner'>3</view>
  <view class='inner'>4</view>
</view>

wxss的代码如下：

.outter {
    display: flex;
    width: 300px;
    height: 300px;
    background: pink;
}.outter.inner {
    background: gray;
    width: 100px;
    height: 100px;
    border: 1px solid#ccc;
    box - sizing: border - box;
}.outter.inner2 {
    flex - shrink: 0;
}

效果图为：
在这里插入图片描述
因为给 inner2 设置了 flex-shrink 为0，所以即使在空间不够的情况下，他也不会被压缩。
flex属性：

flex属性是 flex-grow flex-shrink flex-basis 三个属性的简写。假设以上三个属性同样取默认值，则 flex 的默认值
是 0 1 auto 。

关于 flex 的取值，有以下几种方式：

auto ：等价于 1 1 auto 。也就是允许增长，允许缩小，宽度为自动。
none ：等价于 0 0 auto 。也就是不允许增长，不允许缩小，宽度为自动。
非负数字：这个数字表示的是 flex-grow 的值， flex-shrink 为1，表示允许缩小， flex-basis 为0%。可以认为他就是把剩余的空间进行填充。比如以下代码是等价的：

.item {
    flex: 1;
}.item {
    flex - grow: 1;
    flex - shrink: 1;
    flex - basis: 0 % ;
}

 0 ：对应的三个值分别为 0 1 0% 。比如以下代码是等价的：

.item {
    flex: 0;
}.item {
    flex - grow: 0;
    flex - shrink: 1;
    flex - basis: 0 % ;
}

长度或者百分比：则这个值视为 flex-basis 的值，而 flex-grow 为1， flex-shrink 为1。比如以下代码是等价的：

.item - 1 {
    flex: 0 % ;
}.item - 1 {
    flex - grow: 1;
    flex - shrink: 1;
    flex - basis: 0 % ;
}.item - 2 {
    flex: 24px;
}.item - 2 {
    flex - grow: 1;
    flex - shrink: 1;
    flex - basis: 24px;
}

两个非负数字：分别视为 flex-grow 和 flex-shrink 的值， flex-basis 取 0% ，如下是等同的：

.item {
    flex: 2 3;
}.item {
    flex - grow: 2;
    flex - shrink: 3;
    flex - basis: 0 % ;
}

一个非负数字和一个长度或百分比：则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {
    flex: 11 32px;
}.item {
    flex - grow: 11;
    flex - shrink: 1;
    flex - basis: 32px;
}

更多关于flex布局请参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

https://zhuanlan.zhihu.com/p/25303493
App生命周期

请参考：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html