《微信小程序从入门到精通》—笔记1

本文介绍: h r &g t;：一条分割线对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格相当于，不管屏幕多大，都分为750分，按照UI给的图，直接写就行，不需要适配屏幕了。貌似比较高级。

项目驱动

在这里插入图片描述

< hr &g t;：一条分割线

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格

由于VSCod e已经集成了emmet 功能，因此，直接输入html:5，即可生成需要的基础信息。

引用：display: flex

flex-direction，决定了main axis的方向，有4个值：
row（默认）、row-revers、column、column-revers
左右、右左、上下、下上

justify-content，决定了flex item s在main axis上的对齐方式

主轴(main axis)，可能是左->右，右->左，上->下，下->上
而交叉轴(cross axis)，只有两个方向：从左到右、从上到下

align-items: flex-end;
align–items: 属性，确定交叉轴
flex-end：属性值，确定交叉轴的具体方向

比如：flex-flow: column wrap 等价于
flex-direction: column
flex-wrap: wrap

align–c ontent，决定了多行flex items在交叉轴(c ross axis) 上的对齐方式，用法与justify-c ontent类似
align-content: flex-start;解决换行中间有间距的问题~

收缩比例 = flex-shrink * flex item的base size
base size 就是 flex item放入flex container之前的size

max-xx|min-xxx > flex-basis > width|height > contain的size

flex是 flex-grow flex-shrink? || flex -basis的简写
flex-shrink?的意思是，flex-shrink可有可无

设置view的高度为height: 80rpx;，如果想让文字的高度上下居中，则设置line-height: 80rpx;即可

	/* 主轴上的对齐方式 */
    justify-content: center;
    /* 交叉轴上的对齐方式 */
    align-items: center;

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

分割线程序空格

小程序，我又来学习啦！请多关照~

第二章：flex 布局

display: flex

flex–direct ion

jus t ify-content

主轴，交叉轴：

align–items

flex-wrap

flex-flow

align–c ontent

order

align–self

flex-grow

flex-shrink

flex-basis

flex

第三章：

发表回复取消回复