简写的 flex:1 具体简写了些什么?

前几天写 flex 容器宽度被内容撑开的问题 查文章的时候,看到了一篇 flex:1 到底代表什么?,确实很多时候只是知道 flex:1 的作用,并不清楚他具体代表了什么。
和那篇帖子一样,我原先理解的也是 flex:1 应该是 flex:1 1 auto 的简写。因为设置了 flex:1 之后就可以让容器扩张了。既然 flex 的默认值是 0 1 auto 那么理所当然的就这样认为了。

看完了这个帖子之后发现其实并不是这样。
简写的 flex:1 其实是 flex:1 1 0%,其中的 flex-basis 的值从默认值变成了 0% ,但是文章并没有说明为什么会这样。

确实这个东西不值得深入研究为什么,只需要知道和理解就可以了。
但,正好昨天在翻《CSS新世界》的时候看到了这部分内容!

阅读全文

flex 容器宽度被内容撑开的问题

在弹性布局中,一个 flex 子项的最终尺寸是基础尺寸(或内容尺寸)、弹性增长或收缩、最大最小尺寸共同作用的结果。
最终尺寸计算的优先级是:
最大最小尺寸限制 > 弹性增长或收缩 > 基础尺寸

  • 基础尺寸由 flex-base 属性或 width 属性,以及 box-sizing 盒模型共同决定;
  • 内容尺寸最指最大内容宽度,当没有设置基础尺寸是会顶替基础尺寸的角色;
  • 弹性增长指的是 flex-grow 属性,弹性收缩指的是 flex-shrink 属性;
  • 最大尺寸主要受 max-width 属性限制;最小尺寸则比较复杂,受最小内容宽度、width 属性和 min-width 属性共同影响。

flex 容器宽度被内容撑开的问题

很早之前就遇到过这个问题但没有整理,当时处理完问题之后就没有管了。昨天又遇到了同样的问题,因为嵌套的层次很深折腾了有2个小时,所以还是需要记录下来以免未来又忘了。

其实很简单,容器使用 width:0;flex:1; 即可解决问题。

但是稍微有点没有理解的是:为什么设置宽度为 0 时,使用 flex-grow:1 可以使容器放大,但是设置宽度为 100% 时,使用 flex-shrink:1 并不会让容器缩小。

阅读全文

微信小程序返回键被劫持点击无效

今天小程序完成了一个新功能,在自测的时候发现了一个问题,小程序的返回按钮点击没反应了,一开始以为是模拟器的问题,结果使用实机测试同样复现了这个问题。

具体跳转路由为:

首页 => wx.navigateTo => 新功能列表页 => wx.navigateTo => 新功能添加页 => wx.redirectTo => 新功能详情页 => 返回按钮 => 新功能列表页 => 返回按钮 => 首页


结果从 详情页 返回 列表页 之后,返回按钮点上去没反应了!!!页面中添加一个自定义按钮调用 wx.navigateBack 返回也不行。

监听了 wx.navigateBacksuccessfailcomplete 三个回调之后发现,successfail 都不执行,只执行了 complete 的回调,输出为:

complete: {errMsg: "fail:navigateBack intercepted"}
阅读全文

编程中的"副作用"是什么意思?

副作用,是相对于主要作用的,并不只是“坏”作用

因为“药物的副作用”,一直以来都没有很好的理解编程中 “副作用” 一词,想当然的把它理解为了 一些“负面”的作用

对于 “副作用” 科书版的解答就是:

  • “副作用”(side effect),指的是函数内部与外部互动,产生运算以外的其他结果。

但是很笼统,对于已经有刻板影响的中文世界,还是很容易曲解的。
正巧今天在水群的时候提到了这个词,发现其实还有很多人和我有一样的问题,并没有很好的理解。

阅读全文

微信小程序学习日记 L08 分包加载

目前小程序分包大小有以下限制:

  • 整个小程序所有分包大小不超过 20M
  • 单个分包/主包大小不能超过 2M

随着项目的不断迭代,小程序的主包会越来越大, 终究会有一天会超过 2M 的主包限制,首先考虑到的就是图片资源放到 CDN 或者 OSS,起初会很奏效,但是随着一些JS库的加入就没办法了,即使使用了 .min 版本,或者精简了类库代码,主包还会很大,这时候就会用到项目分包了。

阅读全文

记小程序flex布局垂直排列出现高度崩塌的问题

今天开发的小程序遇到了一个问题,在 iPhone8 iOS 12.2 的设备上访问出现了高度崩塌的问题,但是在其它的型号的 iOS 和 Android 设备上没有复现,
一开始以为是 微信版本 的问题,但是更新到了最新还是出现该问题。调试了一下发现问题出在子元素的 display:flex 上,修改为 block 之后高度就不会崩塌了,但是元素的样式就没办法做了。

阅读全文

微信小程序学习日记 L07 eventChannel 页面事件通信通道

页面间的通信在各种项目中都是很常见的功能,在小程序中如何在不同页面中使用组件间通信,
其实很简单,懒得看我叨叨的可以直接查看 🔗 官方的DEMO

阅读全文

微信小程序学习日记 L06 组件插槽

小程序的插槽用法和 Vueslot 几乎一模一样,现在组件内需要的地方加入插槽(<slot>)节点就行了。也可以直接查看小程序提供的 🔗 代码片段

<!-- 组件模板 P.S. 设置语言类型为html是因为wxml没有高亮 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>
<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

是不是很简单,需要使用到具名插槽的话,只需要在组件的 options 中开启 多slot支持 multipleSlots 就可以了。

阅读全文

分享会 只用CSS实现轮播图

早些时候有看到过一个 纯CSS轮播图 的文章,当时有研究过实现,大概是利用了 hash (锚标记) 和 scroll-snap 来实现的,但是具体实现已经回忆不起来了。

正好现在分享群组里边暂时没有主题了,就想着可以当成一个常驻的补位小环节,大家一起浏览 CodePen 之类的社区找一个大家都感兴趣的 Demo 来研究。
在分享前还是需要自己重新研究一遍的,不然在讲述的时候出错可太 “甜蜜的” 尴尬了。

阅读全文

网页链接里的 noopener、noreferrer 和 nofollow

之前在一篇 帖子 中看到了一个名词 【阻断权重传递】,进而去了解一下这个名词。

阅读相关资料的过程中,收集了3个 no 开头的关键词(noopenernoreferrernofollow),并且作为相似内容整理成这篇笔记。

太长不看版:

  • noopener: 使用target="_blank"所打开的页面,将无法获取 window.opener 对象。
  • noreferrer: 使打开的页面无法获取 document.referrer 信息。
  • nofollow: 表明对该链接不认可,不传递权重。

如果有兴趣可以接着看下去

阅读全文