前端开发必会知识点-布局篇：Flex布局详解.pptxVIP

flex弹性盒子;lesson1flex-shrink和flex-grow笔记;术语;CSS3弹性盒子flex;Flex-grow;2.flex-shrink;flex-basis;4.flex

常用简化写法:

flex:1—flex:110%;

flex:3—flex:310%;

注意:flexbox布局和原来的布局是两个概念，部分css属性在flexbox盒子里面不起作用，eg：float，clear，column,vertical-align等等

真实情况：

son1=(flex-shrink)*flex-basis；

son2=(flex-shrink)*flex-basis；…

sonN=(flex-shrink)*flex-basis；

加权值=son1+son2+….+sonN；

压缩的宽度w=(子元素flex-basis值*(flex-shrink)/加权值)*溢出值

缩减值1：(flex-basis1*1/加权值)*溢出值

缩减值2：(flex-basis2*2/加权值)*溢出值

缩减值3：(flex-basis3*3/加权值)*溢出值

最后son1、son2、son3，的实际宽度为：

flex-b