微信小程序学习笔记(五)
发布日期:2021-07-01 02:12:45
浏览次数:3
分类:技术文章
本文共 3251 字,大约阅读时间需要 10 分钟。
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,即如果存在剩余空间,也不放大。比如有以下代码:1 2
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,那么他的宽度将会保持为设置的宽度,如果宽度没有设置,那么将根据他的子元素来保留宽度。假如代码为:1 2
wxss代码为:
.outter.inner1 { flex - grow: 0;}.outter.inner2 { flex - grow: 1;}
效果图为:
如果把 inner1 的 width 删掉,那么效果图为:
flex-shrink属性: 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。比如有以下代码:1 2 3 4
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布局请参考:
App生命周期请参考:
转载地址:https://maoli.blog.csdn.net/article/details/89321803 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过,博主的博客真漂亮。。
[***.116.15.85]2024年04月26日 19时19分37秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
秋招总结(一)-C++归纳
2019-05-01
秋招总结(三)-操作系统归纳
2019-05-01
带缓冲I/O 和不带缓冲I/O的区别与联系
2019-05-01
LINUX CP命令详解
2019-05-01
source insight快捷键及使用技巧
2019-05-01
映 射 ALT 键
2019-05-01
vim使用快捷键F4生成文件头注释、F5生成main函数模板、F6生成.h文件框架模板
2019-05-01
用python解析html
2019-05-01
OV5620的视频驱动
2019-05-01
C++中两个类交叉定义或递归定义的解决办法
2019-05-01
ECharts is not Loaded解决方案
2019-05-01
ECharts地图显示不完整,只显示南海诸岛问题
2019-05-01
echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法
2019-05-01
记一次Hive 行转列 引起的GC overhead limit exceeded
2019-05-01
OpenGL ES八 - 交叉存取顶点数据
2019-05-01
crontab定时任务写法
2019-05-01
nginx: [emerg] unknown directive "if($remote_addr" in /usr/local/tools/nginx/conf/nginx.conf:57
2019-05-01
module pip has no attribute main问题解决
2019-05-01
LeetCode 134.Gas Station (加油站)
2019-05-01