[TOC]虽然flex布局用了很久了，但是对于这个东西的一些属性我确实不是很了解。我只知道有这样的效果，但不知道为什么会这样。于是找了一些资料总结一下。Flex是FlexibleBox的缩写，意思是“灵活的布局”，用来为盒模型提供最大的灵活性。其实说白了就是他会根据自己的宽度自动调整里面的子元素的宽度，即使已经设置了里面的子元素的宽度；从而达到一种类似于自适应的感觉（虽然实际上并不是自适应）。传统的通用属性布局方案，基于盒模型，依赖显示属性+位置属性+浮动属性。对于那些特殊的布局来说很不方便，比如垂直居中不容易实现。不管是position还是float，都会导致自己脱离文档流，直接导致父元素没有高度，所以需要额外的代码来修正flex轴和正负自由空间。使用Flex布局的元素称为弹性容器（flexcontainer），简称“容器”。它的所有子元素自动成为容器的成员，称为弹性项目（flexitem），简称“项目”。说白了，谁写了display:flex，谁就是flex容器。容器中默认有两个轴：水平主轴和垂直横轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。（简单点说，默认X轴为主轴，Y为横轴）flex-directio:row（默认值）：主轴为水平方向，起点在左端. row-reverse：主轴水平，起点在右端。 栏：主轴在垂直方向，起点在上边缘。 column-reverse：主轴为垂直方向，起点沿底部。如果不写该属性，则默认X轴为主轴。如果你设置column，它会垂直排列。其他两个用的不多。这两个东西会决定正负自由空间（positiveandnegativefreespace）的计算方法！！！∑(?Д?ノ)ノ……这是什么鬼？太邪恶了，其实当主轴为row时，里面的子元素的宽度之和没有超过父元素的宽度，也就是有盈余，那么这部分的剩余空间就叫做正自由空间；否则为负自由空间；即超宽；当主轴为Y轴时，则计算正负自由空间为元素的高度；这个所谓的正负自由空间也会影响后面子元素的两个缩放属性flex-grow和flex-shrink。flex-grow属性指定了flex增长值，它决定了在分配正空闲空间时，flex子元素相对于flex容器中其余flex子元素的增长程度。比如生活场景是父亲留给儿子的遗产。这些儿子应该如何根据比例来分配；假设下面的外包装是600px；a,b都是100，hello是150，那么可分配空间=600-100-100-150=250px；现在添加样式a{flex-grow:1}b{flex-grow:1}b{flex-grow:2}现在按照1:1:2的比例分配250，每份62.5px，然后会变成（图片不准确）因为flex-directio:column的意思是设置主轴为Y轴后，那么正的自由空间就会以元素的高度为准。,负自由空间，即里面子元素的宽度之和大于父元素的宽度，那么超出部分称为负自由空间（negativefreespace）；negativefreespace和positivefreespace类似，只不过变成了Negativevaluesonly，假设父元素为600px，最下面的三个子元素，100,100,500,negativefreespace=600-(100+100+500)=-100;现在三个子元素的flex-shrink分别是1,1,2，也就是说-100px是按照1:1:2的比例分配的；它应该是得到实际计算出的宽度：第一个：(100-100*(2/2+1+2))=60，第二个(100-100*(1/2+1+2))=80px，第三个(500-100*(2/2+1+2))=460px；最后：60+80+460=600px；骚年，你觉得上面说的对吗？信不信，就是图森破ヾ(?°?°?)??...一开始我也是这样计算的，但是和浏览器的计算相去甚远。花了很长时间才找到正确的计算方法；他的计算方法还是有点复杂：先求负空间：600-(100+100+500)=-100然后自己的flex-shrink乘以自己的width得到消化值：`a:100*2=200;b:100*1=100;c:500*2=1000;`求消化值之和：200+100+1000=1300；第三步：计算宽度a：(200/1300)*100=15.38；b:(100/1300)*1=7.69；c:(1000/1300)*100=76.92;...(▼ヘ▼#)第四步：计算最终宽度：a:100-15.38=84.62;b:100-7.69=92.31;c:500-76.92=423.08**所以我们可以得出一些结论：1.在flex中，它可能会改变容器中元素原有的绝对宽度，即使把宽度写死，尤其是flex-grow和flex设置了-sharink的情况下，会根据这些比例值动态计算子元素的宽度。2.当空闲空间为正时，flex-grow生效，shrink不生效。3、当freespace为负数时，flex-shrink生效，grow不生效4、flex-basis在一定程度上等于width；**flex-basis和width一样，默认值为auto，上面的例子换成width也是一样的。当然工作中最好使用flex-basis。更符合规范。所以在使用flex的时候，有时候会得到一个意想不到的宽度，明明是我写的宽度？ヽ(￣▽￣)?。我也知道为什么会得到这个值...右边单元素的方法1flex:1;文本对齐：右；方法2margin-left:auto;swiper滑动插件swiper滑动插件，一款专门为手机滑动设计的插件，非常不错；在做起点官网品牌营销的时候，遇到过3需要在一个地方使用，也是比较有代表性的使用场景（这里注意swiper3和swiper4版本的区别，这里使用的3和4的参数都差不多，可以看文档）；第一种场景：可能有一个有多个滑动区域，所以为了保证唯一性，在实例化的时候传入id是一个明智的选择。这个场景的难点是滑动下面的图片，上面的按钮要相应的切换类。同时点击顶部按钮下方的按钮图片要根据切换方式分析：滑动结束后，获取当前元素的序号，根据序号匹配上面的按钮;在实例化swiper的时候，可以传入一个对象作为参数，这个对象有一个回调函数参数onSlideChangeEnd（还有其他函数，都是一些事件触发的），接受当前swiper对象作为参数，滑动结束后触发，并且有一个属性值activeIndex，是当前激活元素的序号，用这个序号对应上面的切换按钮；结构和代码部分：varskillSwiper=newSwiper('.skill-model-swiper',{//实例化滑动对象分页:'.swiper-pagination-skill',//分页指示器onSlideChangeEnd:function(swiper){//Swipe获取当前激活数，swiper为当前swiper对象varcuridx=swiper.activeIndex;//activeIndex键属性，当前激活元素的序号$('.skill-lenli-btnbutton').eq(curidx).addClass('skill-lenli-btn-act').parent().siblings().find('button').removeClass('skill-lenli-btn-act');}});第二场这种场景的难点在于一个大div下嵌套了多个swiper区域，伴随着tab标签的切换效果，用上面的切换按钮进行切换。其实制作起来比较简单，但是会出现一个意想不到的情况，Σ(っ°Д°;)っ除了第一个刷子，其余的刷子都会出现滑动卡顿。解决方法：实例化每个swiper时添加observer:true,//修改swiper本身或子元素时，自动初始化swiperobserveParents:true,//修改swiper父元素时，自动初始化swiper的两个附加参数，解决结构和代码$('.ds-sw>div').click(function(event){vari=$(this).index();$(this).addClass('ds-sw-act').siblings().removeClass('ds-sw-act');$('.ds-person-item').eq(i).addClass('ds-person-item-act').siblings().removeClass('ds-person-item-act')});vardsItemSwiperA=newSwiper('.ds-person-swiper-a',{observer:true,//修改swiper本身或子元素时，自动初始化swiperobserveParents:true,//修改swiper的父元素时，自动初始化swiper分页:'.dsItemSwiperASw'})//下面每个swiper的写法都是一样的，第三个场景是B、C、D，这个场景是一个不规则的应用场景。它需要泄漏元素上的上一个和下一个。其实也很简单，只要记得给每个swiper-slider一个固定的宽度，然后实例化结构体vardnrSwiper=newSwiper('.swiper-container-dinner',{slidesPerView:'auto',centeredSlides:true,spaceBetween:10,自动播放:3000,})其他一些内容过多或使用自定义分页器，可能会导致滑动问题。建议延迟初始化300ms。请注意，swiper3和swiper3有所不同。swiper3和4都没有鼠标停止自动播放，而且离开后继续播放的选项只能手动写，后面补上代码
