基本知识点容器样式项目样式容器是一个容器，项目是容器中包含的项目。display:flex把一个元素变成一个flex容器；containerstyle1.flex-direction：改变项目的流向（主轴）rowfromlefttorightcolumnfromtoptobottomrow-reversefromrighttoleftcolumn-reversefrombottomtoleftabove2.flex-wrap：改变换行，默认值为nowrap备注：当给容器一个固定的宽度时，当向容器中添加一定宽度的项目时，当添加的项目宽度大于容器时，逐渐添加的项目会发生变化他们自己的宽度，因为项目需要排成一行。nowrapwrapwrap-reverse3.jusify-content：指定主轴对齐方式（默认主轴为横轴）。默认值为flex-startflex-startitems到流的开始flex-enditems到流的结束会将空白区域分成多个部分，并直接包围每个项目。space-evenly每个item旁边的空白宽度相同4.align-items：指定副轴的对齐方式（默认副轴为垂直轴），默认值为stretchflex-startflex-endcenterstretch时每个项目的内容大小不同，因此当每个项目的高度不一致时，使用该属性将使其他项目的高度与容器中最高的项目保持一致。baseline5.align-content：多行内容时flex-start。当容器的高度大于项目总高度时，项目之间会出现空白。使用此属性将使所有项目靠得更近。在flex-end下面留下空白当容器的高度大于项目总高度时，项目之间会留有空白。使用此属性将使所有项目靠得更近。在中心上方留下空白当容器的高度大于项目总高度时，项目之间会留有空白。使用此属性将使所有项目靠得更近。上下均匀分布空白stretch使空白均匀分布在item之间space-betweenspace-arounditems样式1.order：默认值为0指定容器中item的排列顺序，顺序从小到大排列2.flex-grow默认值为0，可以通过这个属性扩展item的宽度。item:first-child{flex-glow:1;}.item:nth-child{flex-glow:2;}.item:last-child{flex-glow:1;}备注：相当于把container容器的宽度平分，第一个和最后一个得到一个宽度，中间一个得到两个宽度.3、flex-shrink的默认值为1，这个属性可以用来缩放item的宽度。属性值为0以防止项目被缩放。4.可以使用flex-basis来控制base的宽度。默认值为自动。整体简称：flex:flex-growflex-shrinkflex-basis5.align-self该属性可用于自定义align-items备注：align-items用于指定垂直轴的对齐方式。比如你指定align-items的值为flex-start，那么容器中的所有item都会上去，如果你想单独控制某一个item的对齐方式，可以通过align来改变-自我属性。只需将此属性添加到项目项目的选择器中，例如align-self:flex-end。几个需要注意的样式和属性display:flex;flex-diection:row/column;flex-wrap:nowrap/wrap;justify-content:conter/space-between;align-items:conter;使用flex等布局方式进行排版布局时，不要写宽度width:50%;min-width:100px;width:30vw;vw代表屏幕宽度的1%min-width:80%；硬编码示例：宽度：100px；float布局用于IE布局，如果不需要兼容IE，可以使用flex布局
