简写的 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 并不会让容器缩小。

阅读全文

分享会 只用CSS实现轮播图

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

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

阅读全文

使用属性选择器为 Markdown 里的图片添加样式

在写 上一篇文章 的时,文章开头有一张示例图,为了节省空间,我用的图片一般都不会很大,并且那张图只是Google出来的,没有调整就直接放上来了。

在列表页看着图片居左就很难受,想要把它居中放置,但是不想用 HTML 的方式来写,就突然想起来早前有看到过 肉大的一篇分享,是通过 CSS属性选择器 来实现的,就想着自己也可以整理一下,然后放到博客的主题当中使用,以后图片排版就会方便很多。

阅读全文

聊聊数据大屏 “炫酷” 容器边框的实现

最近大屏又开始火了,群里好多人又开始捡起来了数据可视化,我也一样遇到了新得是数据可视化项目,但是这次不是说 ECharts,而是数据大屏上的所谓 “科技感” 容器,比如下图:

数据大屏截图

可以看到很多的边框,虽然说可以直接让 UI 小姐姐 切给我们出来所有不同规格的背景图片来解决问题,但是就需要 UI 一份一份切给我们,就很麻烦,而且占用首屏加载的资源。
我就想是否可以用一些精灵图来完成,或者一些简单的边框可以直接使用一些 CSS 的奇技淫巧来完成。

我从花瓣上找了一些示例,然后通过CSS复现,接下来上实例

阅读全文

CSS 中的遮罩属性 mask/masks

最近有点忙,于是又停更了一个月😂,前两天在 V2 上看到 一个帖子,需求是要做一个镂空遮罩。

回答的过程中想起来有一个 mask 属性来着,好像可以试试,但是快下班了,也没有找到合适的遮罩图,也不想打开PS自己画一个再传图床,就还是用的 clip-path 做了一个 CodePen Demo
这两天稍微有点时间,可以考虑研究一下这个遮罩属性,以及能否搭配 filter:drop-shadow() 使用。

阅读全文

在 Flex 布局中使用 gap 属性

最近在更新博客的样式,突然想到现在的flex布局已经可以定义间距了,所以大概整理了一下关于gap这个新属性资料。

gap 属性是用来设置网格行与列之间的间隙(gutters),该属性是 row-gapcolumn-gap 的简写形式。

起初是在 Grid 布局中用 grid-gap 来设置行间距和列间距的,后来意识到 Multi-column 布局中有一个 column-gap 属性,同时存在 grid-column-gapcolumn-gap 对于开发者来说是一个很疑惑的问题。并且在大范围应用的 Flex 布局中,并没有一个很好的方法来设置行间距和列间距。

于是CSS齐属属性规范开始调整,gap 代替了grid-gap 属性,并且规范对间隙属性进行了大统一,三种布局只需要使用 gap 属性就可以设置间距样式了。

阅读全文

CSS 选择器权重和优先级

群里突然又聊到了CSS样式的权重,这个话题每隔一段时间就会出现一次,但是每次都去搜索找选择器权重的文章分享有点太麻烦了,
主要是配图,想要找到自己记忆里的那张图真的很麻烦😂,所以还是自己整理一篇,以后直接分享自己的笔记就好了。
其实权重计算这个东西不麻烦,就是分 4 类:

  1. inlineStyle: 行内样式
  2. #ID: ID选择器
  3. .Class: 类,属性和伪类选择器
  4. Element: 元素和伪类元素选择器

简单的权重比较 inline style > ID > Class > Element > * 这个应该不需要说了吧,主要是多个选择器混合使用时计算的问题。

阅读全文

被忽略的两个 Background 新属性(CSS3)

之前在看一个文章的时候有提到过,background 的这两个属性,确实不常用到,以至于没有几个人知道这两个新属性。
和他们同时期出的 background-size 因为经常用到所以被大众所熟知。

对的,这次我要说的是background-originbackground-clip 两兄弟

阅读全文

鼠标移出时颠倒元素过度效果

今天有一个小伙伴在群里问,怎么让鼠标经过的移出效果和移入效果相反。

比如说
移入的时候先让元素增加宽度,接着增加高度,最后显示内部元素,
鼠标移出的时候,先收缩高度隐藏元素,最后还原宽度。

看了一些回复有些答非所问,或者推荐用 Js 的。
最开始想的是,animation 是不是有一个 direction 属性可以设置反向么,
就想看 transition 是不是也有,但是并没有。CSS transition - MDN
所以就想着用 :hover 来覆盖原先的 transition

阅读全文