-
这里又说了 1rem 就是 "根节点的字体大小"
查看全部 -
这里的flex的第三个值 由于父元素的flex-direction 设置为 column 所以30px是在竖直方向上的"宽度"
查看全部 -
通过设置align-items: flex-start 来设置 垂直方向 的对齐
查看全部 -
这里用"重新设置flex属性值"的方式覆盖前面的设置值
如果前面的flex值是none 也就是0 0 auto 那后面可以直接用width值来进行设置
查看全部 -
注意 平常写 flex:1 时 等于flex: 1 1 0%
查看全部 -
flex:０0 auto 时 设置的width属性生效. 否则 以flex设置的属性为准.
查看全部 -
这里如果设置了flex:2 flex-grow被后台设置为了2 而flex-shrink还是为1
查看全部 -
注意这里 flex:1 在chrome里实现后的具体值
也就是一行的flex:1 在chrome里的实际值是三个 flex-grow flex-shrink flex-basis
查看全部 -
flex的特殊写法
注意这里有很多的 0
查看全部 -
这里也很重要
flex的值用三个数字来表示
第一个代表的是 flex-grow
第二个代表的是 flex-shrink
第三个代表的是 flex-basis
查看全部 -
这里注意第二行 和第三行后面的两个字 '比率'
就是说 flex-grow 和 flex-shrink 都是一个比值.
查看全部 -
这里很有意思 超出部分的缩小值 比例 使用flex-shrink来设定.
查看全部 -
如果关闭了后台自动的缩小(即设置flex-shrink:0) 效果就是 体现出子元素的宽度总和的实际大小.
查看全部 -
子元素超出父元素的情况.
实际上他自动做了 flex-shrink的操作.
查看全部 -
这里的计算用到了 flex-basis 和 flex-grow 两个值进行配合运算.
查看全部
举报
0/150
提交
取消