已经深刻掌握的知识点如下
知识点A:flex line
- flex items 在flex container中按flex lines布局对齐
- 按flex-wrap性质(flex-wrap: nowrap或者flex-wrap: wrap/wrap-reverse)分为single-line和multi-line
- content变为多行时,justify-content 和align-self属性只能对一条线上的items起作用
知识点B:flexibility(使flex items "flex"的能力)
当flex-grow和flex-shrink的值为0时,flex item是fully inflexible
items的flex性质:flex:none 或者 [flex-grow] [flex-shrink] || [flex-basis] (初始值为0 1 auto)(标准7.1节上怎么写反了?)
flexibility的组成部分
flex-grow:number(初始值为0,适用于item)
flex-shrink:number(初始值为1,适用于item)
flex-basis:content或者width(初始值为auto)flex属性的基本值:
1) flex: initial(即flex: 0 1 auto)
此时item的size取决于width/height属性;
如果这些性质是auto,则取决于content大小;
不可放大,但空间不够的话可缩小;
align abilities和‘auto’ margins可用来对齐item
2) flex:auto(即flex:1 1 auto)
基于‘width’和‘height’,但能达到fully flexible;
当items是flex:auto/initial/none,在item的尺寸确定后多余的空间会平均分给属性为auto的item
3) flex:none(即flex:0 0 auto)
根据width和height让item变得fully inflexible;
与initial类似,但items不能shrink,即使是溢出的情况
4)flex:positive number(即flex:positive-number 1 0)
flex-basis为0,使得items以具体的比例占据容器
基本掌握,但还有一些点需要深入的知识点如下:
知识点C,需要进行深入的问题是
问题C1:flex-basis取不同的值(content/width/auto),有何不同
知识点D
1.Alignment
- 优先通过justify-content和align-self 对齐
2) overflow boxes忽略auto margin
3)适用于containers:
justify-content:flex-start | flex-end | center | space-between | space-around (初始值为flex-start)
4)align-items与align-self
适用于flex containers:align-items:flex-start | flex-end | center | baseline | stretch (初始值为stretch)
适用于flex items:align-self:auto | flex-start | flex-end | center | baseline | stretch (初始值auto) - 适用于multi-line flex containers:
align-content:flex-start | flex-end | center | space-between | space-around | stretch(初始值为stretch)
初步掌握,还需要再次反复学习的知识点如下:
知识点E:baseline的设定
大概了解,但还很多问题不明白的知识点如下:
知识点F:Flex Layout Algorithm还没开始看
leetcode
leetcode完成的任务编号为:14
leetcode做到一半的任务编号为:20
leetcode中遇到的问题包括:
问题1描述:将内部函数返回值,当成外部函数返回值了
解决:更改为外部函数的返回值
问题2:(技巧)使用flag=true/false判断最终返回值