所有内容均来自阮一峰老师的文章Flex布局教程：语法，但本总结是结合平时使用的自我表达。简介Flex布局让frame内的排版更加方便，比如网格排版、长宽自适应分配、垂直居中等，这些可能需要很多样式才能完成，但是使用flex会变得更加原生。flex布局主要是通过两层结构实现的，分别是outercontainer和inneritem。当然内层项目也可以是更内层的容器：外层容器项目：内层项目主轴：项目排列方向的横轴：主轴竖直容器的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-direction主轴方向//rowfromlefttoright//row-reversefromrighttoleft//columnfromtoptobottom//rowfrombottomUpflex-direction:row（默认）|行反转|栏目|列反转；flex-wrap控制item的换行规则，因为数量默认是不改变的，当item的宽度之和大于容器的宽度时，会根据item的一些属性来确定实际宽度分配//nowrap不换行//wrap换行，新行在下面//wrap-reversewraps，新行在flex-wrap上面：nowrap(default)|包装|wrap-reverse;flex-flow是flex-direction和flex-wrap的缩写//defaultflex-flow:rownowrapflex-flow:||<弹性包装>;在justify-content的主轴上对齐justify-content:flex-start(default)|弹性端|中心|间隔|space-around;align-items在横轴上对齐//flex-start对齐横轴起点//flex-end对齐横轴终点//center横轴中点对齐//baselineitem首行文本的基线对齐方式//stretch如果item没有设置高度或者设置为auto，则会占据整个容器的高度align-items:flex-start|弹性端|中心|基线|拉伸（默认）；align-content定义多个轴的对齐方式。如果项目只有一个轴，则此属性无效。//flex-start与交叉轴的起点对齐//flex-end与交叉轴的终点对齐//center与交叉轴的中点对齐//space-between与交叉轴的两端，轴之间的间隔为averageDistribution//space-around每个轴在两边等距分布。因此，轴之间的距离是轴与框架之间距离的两倍//stretch轴占据了整个横轴align-content:flex-start|弹性端|中心|间隔|环绕空间|拉伸（默认）；关注上图中的拉伸。从item的高度和height/auto的区别可以看出，stretch的原理是把横轴按照行数（横轴的长度/行数线）。如果设置了高度，则使用真实高度，如果不设置高度，则填充单个高度。项目的属性orderflex-growflex-shrinkflex-basisflexalign-selforder定义项目排序的顺序。值越小排列越高，可以为负数，值相同时使用dom顺序。命令：<整数>；//0defaultflex-grow定义item的放大比例，默认为0，即如果还有剩余空间，则不放大。负数无效，浏览器默认为0。flex-grow:;//0默认注意放大比例是从剩余空间分配的，上图中item最终的实际宽度（px）：图1：剩余宽度restWidth=300-3*50红色宽度redWidth=1/3*restWidth+50黄色宽度yellowWidth=2/3*res??tWidth+50绿色宽度greenWidth=50图2以此类推图3因为没有剩余宽度，flex-shrinkflex-shrink定义了项目的收缩比例，即，如果没有足够的空间，物品就会缩小。当flex-shrink属性为0时，item不会收缩。负数无效，浏览器默认为1。弹性收缩：<数字>；//1default注意当flex-shrink属性为0的item的总宽度大于等于容器宽度，即没有剩余空间分配时，其他flex-shrink属性的item的宽度不为0会收缩刚好能容纳内容，padding,margin仍然有效。上图中item最终的实际宽度（px）：图1：剩余宽度restWidth=300-3*100=0，所以redWidth和yellowWidth成为可以容纳内容的最小宽度图2：剩余宽度restWidth=300-2*100=100所以redWidth和yellowWidth按照一定比例分配给restWidth。分配策略尚不明确。flex-basisflex-grow和flex-shrink都是指剩余空间，其实就是根据这个属性计算出来的。它的默认值为auto，即项目的原始大小。bootstrap4的grid系统就是用这个属性来代替bootstrap3的float:left+width%组合。弹性基础：<长度>|汽车;//autodefaultflex是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。该属性有两个快捷键值：auto(11auto)和none(00auto)。Bootstrap4的网格系统使用(00%)flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]align-self允许单个项目具有不同于其他项目的对齐方式可以覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch。对齐自我：自动|弹性启动|弹性端|中心|基线|拉紧;
