前言
在日常的开发中，我们可能遇到各种各样的问题，无疑每次解决一个问题的时候我们都会获得提升和进步，如何让这种进步可持续化并使自己印象深刻。显然，笔记是一个很不错的方式。本文将以倒叙的方式记录自己在日常开发中的问题解决和学习思考，如果有比较值得一说的问题或知识点再独立出博客。
2020-07-06
- flex 属性
flex 属性由 flex-grow <flex-shrink> <flex-basis> 组成，默认值为 0 1 auto
如果简写为 flex: 1 呢？
大家很容易误解为 flex: 1 0 auto
其实实际效果为 flex: 1 0 0,是不是觉得很惊喜？
下面看看不同简写的默认值吧
flex: none => flex: 0 0 auto
flex: auto => flex: 1 1 auto
flex: 1 => flex: 1 0 0
flex: <number> => flex: <number> 0 0
flex: <number> <number> => flex: <number> <number> 0
flex: <number> <length> => flex: <number> 1 <length>
2020-06-24
- Flex
容器属性
- flex-direction 的属性有四个
row | row-reverse | column | column-reverse
reverse 表示项目的排列顺序
- flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式
flex-flow: <flex-direction> || <flex-wrap>
默认为 row no-wrap
-
align-item 的默认值 stretch，如果项目未设置高度或设为 auto，将占满整个容器的高度
-
多根轴线的 align-content
项目属性
-
order 属性定义项目的排列顺序，数值小的靠前
-
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大，如果为其它整数属性则按比例瓜分剩余空间
-
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，空间不足时将按属性的比例缩小空间
-
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
-
flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。
-
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为auto，表示继承父元素的align-items 属性，如果没有父元素，则等同于 stretch
欢迎到前端学习打卡群一起学习～516913974
