已经深刻掌握的知识点如下
知识点A:display:flex和inline-flex的区别:
flex的作用对象是block级元素
inline-flex的作用对象是inline级元素
知识点B:display:none与flex item中使用visibility:collapse的区别
- visibility:visible(可见)/hidden(隐藏并留空位)/collapse (表格元素中使用,可删除行列,并把空间给其他内容,不影响表格布局,如果此值被用在其他的元素上,会呈现为 "hidden" )
- display:none(不占用文档流中的位置,不留空位)
- 在flex item中,设置visibility:collapse与display:none 的效果一样(chrome中collapse与hidden相同,在FF和edge可用)
- 推荐用display:none
基本掌握,但还有一些点需要深入的知识点如下:
知识点C:隐藏的flex item的最小宽度和最小高度
- flex items有默认的最小尺寸(min-width:auto; min-height:auto)
- automatic minimum size:一般取决于content size和specified size中更小的那个值;但在盒子有宽高比且没有specified size时,取决于content size和transferred size中更小的一个。
问题C1:我理解的
specified size:给定尺寸
transferred size:固定宽高比(如input标签大小)
content size:内容区域的大小
是这个意思吗?
知识点D:次序和方向
- flex-direction:row | row-reverse | column | column-reverse
- flex-wrap:nowrap | wrap | wrap-reverse
- flex-flow:flex-direction || flex-wrap(初始值:row nowrap)
- order: integer(初始值为0,改变items的排列顺序,数字越小 )
1) 适用于flex items和flex containers中定位为absolutely-positioned children
2)order只改变视觉顺序,不改变文档流中的顺序
初步掌握,还需要再次反复学习的知识点如下:
关于该知识点有以下疑问
问题E:flex lines
leetcode
leetcode完成的任务编号为:9
leetcode做到一半的任务编号为:14
leetcode中遇到的问题包括:
问题描述:寻找最长公共前缀的算法有问题