flex-tutorialsflex布局的系统介绍，也可作为自学文章flex基本概念使用弹性盒子的意义是在任意尺寸的屏幕上改变它和它的子元素的大小填充屏幕可用空间。flexbox容器将扩展其子容器以填充可用空间，并收缩其子容器以避免溢出。flex属性flex布局页面的元素可以分为两类。1.柔性容器2.柔性元素（柔性容器中包含的元素）柔性容器有两个方向：水平轴（main）和垂直轴（cross），决定了整体柔性布局的流向。默认布局：横轴从左（mainstart）到右（mainend），纵轴从上（crossstart）到下（crossend）图片来自MDNelasticcontainer及对应的CSS属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentflex-direction指定内部元素在flex容器中的布局方式，并定义主轴的方向（正向或负向）。row-reverse有4种：默认，保持原布局不变，按横轴方向布局，即从左（mainstart）到右（mainend）row-reverse：沿水平方向layout，替换水平默认方向，即Fromright(mainend)toleft(mainstart)column-reverse：按照纵轴方向布局，替换默认的纵轴方向，即从bottom（crossstart）到top（crossend）demo注意：flex-direction的值为main整个flex布局的轴，flex-direction:row|row-reverse是横轴上的主轴，flex-direction:column|column-reverse以纵轴为主轴，flex-wrap为横轴指定flex元素是单行显示还是多行显示。如果允许换行，则此属性允许您控制线条的堆叠方向。nowrap有3个选项：默认，单行显示，如果宽度溢出，会自动压缩对应元素的宽度（压缩比例与flex-shrink有关），保持单行换行:多行显示，如果宽度溢出，自动换行wrap-reverse:多行显示，替换侧轴的方向demoflex-flowflex-direction和flex-wrapshorthand.class{;/*DefaultAttribute*/}justify-content属性定义弹性元素在主轴方向的排列。有5个可选值。flex-start：默认值，按照主轴方向排列。space-between：在主轴上均匀分布弹性元素。相邻元素之间的距离相同。每行的第一个元素与行首对齐，每行的最后一个元素与行尾对齐。space-around：在主轴上均匀分布弹性元素。相邻元素之间的距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将是相邻元素之间距离的一半。demo1demo2align-items属性定义了弹性元素在横轴方向的排列。有5个可选值。flex-start：默认值，按照横轴方向对齐。以点为中心的基线：所有元素都与基线对齐。侧轴起点到元素基线距离最大的元素会对齐侧轴起点来确定基线（不是很清楚，上面MDN上的解释）stretch:拉伸弹性元件填充侧轴的空间。demoalign-content属性定义了当elastic元素多行时，元素在纵轴上的排列有6个可选值：flex-start：默认值，靠近上一行，第一个lineclosetoedge,和主轴的排列有关flex-end:替换横轴的方向排列,closetopreviouslinecenter:居中到中点,靠近上一行space-between:所有的行均匀分布在容器中。两条相邻的线等距。容器垂直轴的起始边和结束边分别与第一行和最后一行的边对齐。space-around：所有行均匀分布在容器中，相邻两行之间的距离相等。容器垂直轴的起始边和结束边与第一行和最后一行之间的距离为相邻两行之间距离的一半。每个节点都可以称为一个弹性元素相应的，一个弹性元素也有自己的CSS属性orderalign-selfflex-growflex-shrinkflex-basisorder弹性元素根据自己的orderdemoalign-self属性的值排序，left和right是和align-items一样，但是由于直接作用于弹性元素，所以优先级高于align-items。demoflex-grow定义弹性元件的横轴拉伸因子demoflex-shrink与flex-grow相反，定义弹性元件的压缩比。当弹性元素的总长度超过容器长度时，各自的压缩率（默认为1）使用demoflex-basis代替width，优先级高于width（如果flex-basis和width的一个值为auto,那么其他非auto的优先级更高)demoflexflex-grow,flex-shrink,flex-basis.flex1{flex:none;的缩写{flex:none;/*等价于flex-grow:0;伸缩收缩：0；弹性基础：自动；*/}.flex2{弹性：1;/*等价于flex-grow:1;伸缩收缩：0；弹性基础：自动；*/}.flex3{flex:130px;/*等价于flex-grow:1;伸缩收缩：0；弹性基础：30px；*/}参考来源MDNW3C
