定位的特殊应用 （1）子绝父相：父无宽度（浏览器宽度），子设置left：0；right：0，可以保留子border和padding前提下，占满父盒子：left/right左右距离（按道理left和right不能共用）：高度同理（父元素设置height也行） （2）子盒子居中（中心），子绝父相+top/bottom/left/right均为0+margin：auto：！儿子必须设置宽高 光干！ 伸缩盒模型flex （1）dispaly：flex（父是块） dispaly:inline-flex（父是行内快：行内快之间会有小间距）：不如给其父设置dispaly：flex，其之间无间距 （2）伸缩项目：无论块、行内、行内快都变成块状化（display：block） （3）只有子元素会变成伸缩项目，孙子什么不会 （4）主轴改了，侧轴跟着改了（垂直） ：等会复习块、行内、行内快 捅出来他就完了，他知道，所以拿捏 （5）主轴方向：flex-direction：row（从左到右）row-reverse从右到左 column从上到下：侧轴默认从左到右 column-reverse从下到上 （6）子元素太多会变窄，主轴换行方式：flex-wrap：nowrap默认不换行wrap换行（上下行之间有缝），侧轴（垂直溢出）warp-reverse上下镜反 光明正大、怼 （7）flex-flow同时指定：主轴方向：flex-direction：row主轴换行方式：flexwrap：warp/////row warp、、、warp-reverse warp：不推荐（前后两个参数不挑顺序） （8）主轴对齐方式：justify-content:flex-start起始位置flex-end结束位置center中间对齐space-around均匀分布，左右两个和边框距离1倍，其他2倍space-between左右贴死 其他均分space-evenly均分，左右两个和边框距离也一样均分 （9）侧轴对齐（一行）：基础1.display：flex2.flex-direction：row3.flex-warp：warp4.justify-content：flex-start开始：align-items：flex-start侧轴的起始位置对齐flex-end侧轴的结束位置对齐center侧轴的中间位置对齐baseline根据盒子中的文字基线对齐stretch拉伸，伸缩项目都不设置高度，每一个伸缩项目高度都充满父容器，默认值 赶快提升自己，提升可能性，别到时候又没有选择，又跑到这里难受 赶快提升自己，提升可能性，别到时候又没有选择，又跑到这里，难受 （10）侧轴对齐（多行）：增加列数直到换行（3行）：基础1.display：flex2.flex-direction：row3.flex-warp：warp4.justify-content：flex-start开始：align-content:flex-start侧轴的起始位置对齐flex-end侧轴的结束位置对齐center侧轴的中间位置对齐space-around伸缩项目之间的距离是相等的，且是边缘距离的二倍space-between伸缩项目之间的距离是相等的，且边缘没有距离space-evenly伸缩项目之间的距离是相等的，边缘有距离，也是相等的stretch拉伸，伸缩项目都不设置高度，每一个伸缩项目高度都充满父容器，默认值 （11）水平垂直居中：（1）父级display：flex justify-content：center（水平居中） align-items：center（垂直居中）（2）父级display：flex 子级margin：auto （12）基准长度（3个）：基础1.display：flex2.flex-direction：row3.flex-warp：warp4.justify-content：flex-start开始：子级：flex-basis：300px设置某一个子级/所有子级也就是伸缩项目在主轴上的基准长度，若主轴是横向的宽失效，若主轴是纵向的高失效。默认：flex-basis：auto原本多宽就有多宽：浏览器用flex-basis：auto这个属性计算主轴上是否有多余空间 （13）伸缩性（3个：不同）：基础1.display：flex2.flex-direction：row3.flex-warp：warp4.justify-content：flex-start开始：所有子级：flex-grow：1将空余空间分成三份，给每一个伸缩项目一份flex-grow：1 flex-grow：2 flex-grow：3 便是空余空间的1/6 2/6 3/6 默认：flex-grow：0：不拉伸 缩：去掉flex-warp：warp换行属性（默认是flex-warp：nowarp）：保留其他基础属性和flex-grow：1，总宽度减小会压缩，因为有flex-shrink：1（默认flex-shrink：1）计算方式：（伸缩子项宽度flex-shrink后面的值，几个伸缩子项按照这种方式计算并且相加求和）为分母，每个伸缩子项 伸缩子项宽度flex-shrink后面的值为分子，计算结果乘以空余空间，便为每个伸缩子项要缩小的宽度;伸缩子项的 缩有伸缩子项的最小宽度，是里面字的宽度或者里面div的宽度 （14）flex复合属性:flex-grow：1拉伸，flex-shrink：1压缩，基准长度flex-basis：100px这三个属性可以简写为flex：1 1 100px，flex：1 1 auto，可以简写为flex：auto。flex：1 1 0，可以简写为flex：1.flex：0 0 auto，可以简写为flex：none。flex：0 1 auto，可以简写为flex：0 auto （15）项目排序与单独对齐：：基础1.（父元素）display：flex2.flex-direction：row3.flex-warp：warp4.justify-content：flex-start开始：（子元素）flex：1 1 0开始：给子元素加order：-1/1/2数字越小，越靠左：默认值：order：0 单独对齐：给子元素设置：align-self：center，单独调整子元素在侧轴上的对齐：默认值：align-self：auto：表示继承父元素align-items属性
