入门级弹性盒子:
1.父框变性为弹性容器
子项在弹性容器内弹性缩放、弹性排版
2.子项自动变性为弹性项:
排列:无约定,横排(类似行内块元素),不换行
高度:无约定,则把父框填满
最终宽度=基础尺寸+动态弹性分配到的尺寸(basis+grow/shrink)
3.弹性项:
启用flex后,属性width和内容尺寸失效。(优先级:flex>width>内容)
4.弹性项的基础尺寸:
优先级:flex>width>内容 有前者则忽略后
5.父框的剩余空间:
父框内容区的宽度=基础尺寸+外间距+边框+内间距(basis+margin+padding)。
6.剩余空间为正数时:
flex-grow扩展比率被激活,每个弹性项从剩余空间中分配相应的份数,作为弹性扩展尺寸。
7.剩余空间为负数时:
flex-shrink收缩比率被激活,每个弹性项从缺额空间中分配相应的份数,作为弹性收缩尺寸。