display:flex

这里是自己不太注意的地方

1.其中的flex-basic来说的话相当于设置其中的宽度，如果flex-basic和width同时设置的话，其中的flex-basic会把width覆盖掉的

2.flex和flex-grow实现的功能是一样的【将其中的空白的部分按照其中的flex设置的值进行均分】

ps：其中如果只是给一个元素设置其中的空白部分都会给其中的那个子元素，如果是多个元素设置了那么就会进行的是均分

具体的区别：

3.flex-shrink:如果子元素的宽度之和大于父亲元素的宽度的话【将根据其中的flex-shrink中的设置将其中的div的宽度进行缩小】

 

对其中的flex进行总结：

1.对多个元素设置flex

2.改变元素的顺序 order

3.改变元素的排列方向:flex-direction: row,column,row-reverse,column-reverse

4.元素宽度和高度的自适应：

元素高度自适应：给父亲节点：flex-direction：row

元素宽度的自适应：给父亲节点：flex-direction:column

5.消除空白：给其中的元素设置flex就可以【如果是垂直方向上的话需要加上flex-direction:column】

6.控制换行：flex-wrap:nowrap | wrap | wrap-reverse

7.指定其中的水平和垂直方向的对齐方式：

水平方向上：justify-content

垂直方向上：align-item【单行】,align-self【设置其中的单个的对齐方式】，align-content 【表示其中的多行的对齐方式】

对应的值是一样的:space-between,space-around,space-start,space-end,center

其中的垂直方向上多了 :baseline,stretch

 

 

问道其中的弹性盒子的时候不要着急说先将其中的布局的发展史说出来

position,float---》多栏布局【栏和栏的宽度是完全相同的，不能指定其中每一栏显示，最好用来显示文章】-----》盒布局[解决其中的底部不能对齐]------》其中的圣杯和双飞翼布局【将其中的用到的margi设置为负的/margin为负以及其中的position：relative】-----》flex

圣杯：

双飞翼：

 

 

 

将其中的margin:为负的影响

对自身来说：设置其中的left和right会让元素的宽度变大，将其中的top让元素上移动，bottom让其中的元素的高度塌陷

对于其中的文档流来说：在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后

 

对于其中的浮动元素来说：将其中的元素进行覆盖

负margin会改变浮动元素的显示位置

绝对定位元素，负margin会基于其绝对定位坐标再偏移【其中的垂直居中的很多种方法用到的就是这个原理】

https://www.jianshu.com/p/549aaa5fabaa