文章关键字 ‘flex-shrink’

flex:0 flex:1 flex:none flex:auto应该在什么场景下使用?

2020年10月6日,星期二

flex:initial适合小部件元素的分布布局,flex:0适合用到替换元素的场景,flex:none适合按钮等不换行的小控件,flex:1适合等分布局,flex:auto适合基于内容动态适配的布局,具体的剖析可以点击链接进行查看。

阅读全文…

Oh My God,CSS flex-basis原来有这么多细节

2019年12月31日,星期二

css flex-basis文章占位图

Flex元素尺寸由盒模型,自身尺寸和flex属性共同决定,其中,自身尺寸包括width和content内容尺寸,flex属性中的flex-basis直接与尺寸关联,这些尺寸混杂在一起,究竟是如何生效的呢?其中细节又是什么呢?本文会为你揭晓这些问题的答案。

阅读全文…

CSS flex属性深入理解

2019年12月22日,星期日

CSS flex深入理解

一文轻松弄懂CSS flex简写语法的含义,从此各种自适应布局驾轻就熟。细节,深入,用心的案例,静心制作的演示说明GIF,全为了让你更轻松地理解与更容易地学习。

阅读全文…

写给自己看的display: flex布局教程

2018年10月28日,星期日

display:flex布局

本文详尽介绍了display:flex布局的各个属性,最大的优点在于所有flex相关属性值的样式表现都是实时渲染的,点击不同的属性值,就可以立即实时看到不同的布局效果,非常直观。同时,很多属性的规则描述要比现有的很多文章介绍的要更详尽,对于初学者一定是一个很不错的学习教程。

阅读全文…