FlexibleBox模型，通常简称为flexbox，是一种一维布局模型。它在flexbox子元素之间提供强大的空间分布和对齐功能。基本介绍浏览器兼容性启用Flexbox容器属性行||列对齐==行和列==水平||垂直对齐==垂直和水平==改变水平对齐==改变水平对齐==改变垂直对齐==改变垂直对齐==aboutbaseline==aboutbaseline==linewrap==wrap==flex元素上的属性orderalign-selfflex-growflex-shrinkflex-basisflex引入了Flexbox，也被称为flexbox模块，它是现代布局系统的两个之一，有CSS网格。与CSSGrid（二维）相比，Flexbox是一种一维布局模型。它将控制基于行或列的布局，但不能同时控制两者。flexbox的主要目标是允许项目根据您设置的一些规则填充其容器提供的整个空间。Flexbox不兼容IE10及以下版本。IE10以下，可以使用如下方法：TablelayoutsFloatsclearfixhacksdisplay:tablehackscompatibilityIE10及以下不兼容，部分浏览器需要使用-webkit或display:-webkit-box兼容性处理。使用flexboxdisplay:flexbox或display:inline-flexbox容器属性flex-directionjustify-contentalign-itemsflex-wrapflex-flow行对齐或列对齐flex-direction决定容器是行对齐还是列对齐。flex-direction:行，行对齐，从左到右flex-direction：行反转，行对齐，从右到左flex-direction：列，列对齐，从上到下flex-direction：列反转，列对齐，从从下到上如下图所示：水平对齐或垂直对齐。项目更改水平和垂直对齐方式。改变水平对齐方式justify-content有5个属性值：flex-startalignsleftflex-endalignsrightcenteralignscenterspace-between将容器的左右两边从头到尾对齐，中间等间距space-around通过每个元素的等间距改变垂直对齐方式align-items有5个属性值：flex-starttopalignmentflex-endbottomalignmentcenteralignmentbaselinebaselinealignmentstretchstretchtofitcontainer关于align-items:baseline，你可以请参阅代码笔：https://codepen。io/flaviocopes/pen/oExoJRwrap默认情况下，flexbox容器中的项目保持在一行中，将它们缩小以适合容器。您可以使用flex-wrap:wrap或flex-wrap:wrap-reverse来包装容器中的元素。简写方式：flex-flow:rowwrap;即flex-direction:row&&flex-wrap:wrap应用于flexbox容器中每个元素的属性orderalign-selfflex-growflex-shrinkflex-basisflexorder-改变元素顺序，如下图所示，你可以指定一个元素的顺序值来改变它的位置。默认值为0。align-self-element使用align-self来覆盖容器的align-items与当前元素的对齐方式。如果需要，可以增加或减少一个元素flex-grow:默认值为0，当一个元素flex-grow为1，另一个为2，则flex-grow:2的元素占用flex-grow:1的2倍空间。flex-shrink：默认值为1，如果没有显式定义该属性，会自动按照默认值1计算所有因子相加后的比例来收缩空间。例如：有这样一个容器，div>.box13+.box22父容器定义宽度为500px，子元素定义宽度为120px，box1的flex-shrink为1，.box2的flex-shrink为2，则添加子容器后即为600px，超出父容器100px。那么多出来的100px需要A、B、C、D、E通过收缩因子消化掉，所以加权合成可以得到1001+1001+1001+1002+100*2=700px。所以我们可以算出A、B、C、D、E要去掉多少溢出：A去掉溢出：(100*1/700)*100，约等于14pxB去掉溢出：(100*1/700)*100，约等于14pxC去除溢出：(100*1/700)*100，约等于14pxD去除溢出：(100*2/700)*100，即约等于到28pxE。去掉的溢出：(100*2/700)*100，即约等于28px。A、B、C、D、E实际宽度分别为：120-14=106px、120-14=106px、120-14=106px、120-28=92px、120-28=92pxflex-basis-用于设置或获取弹性框伸缩基值，默认值为auto，它和width的区别可以参考这篇文章：https://www.jianshu.com/p/17b...flex：一共有三个属性valuesflex-growflex-shrinkflex-basisflex:01auto对应flex-grow,flex-shrink,flex-basis,通过游戏学习flexboxhttp://flexboxfroggy.com/#zh-cn
