学习flex布局

//flex-direction:row将第一个元素水平向左排列[1,2,3]//flex-direction:row-reverse水平排列右边的第一个元素[3,2,1]//flex-direction:column将第一个元素垂直排列在顶部[1,2,3,]//flex-direction:column-reverse将第一个元素垂直排列atthebottom[3,2,1,]注意：该属性通过定义flex容器的主轴方向来决定felx子元素在flex容器中的位置。这将决定flex需要如何排列，不仅是对齐方向，还有子元素的排列顺序。第一个元素或具有更高阶的元素将出现在对齐方向的第一个位置。flex-wrap设置flex容器的子项是否可以在主轴上换行。默认情况下，项目应在主轴上展开。通过设置flex-wrap，可以在主轴上显示root{flex-wrap:nowrap|包装|换行；//三个值任选其一}三个值是：nowrap默认值，即即使容器内空间不足，行也不会换行，但会调整子元素的大小.wrap的意思是如果子元素超出了容器的空间，就需要进行包裹，需要按Z序排列，即第一行在最上面；wrap-reverse表示换行显示，但是按照Z的倒序排列，即第一行在最下面，每行的主轴方向的顺序还是按照弹性方向设置。flex-flow是一个类似的语法糖，它是上面提到的两个flex-flow的组合：<'flex-direction'>||<'flex-wrap'>，可以看出这是一个复合属性。设置或获取flexbox模型对象的子元素排列。.root{flex-flow:rownowrap;}//等价于下面的.root{flex-direction:row;flex-wrap:nowrap;}justify-content设置主轴方向的对齐方式justify-content;定义主轴对齐中的项目。.root{调整内容：flex-start|弹性端|中心|间隔|空间周围；//五个值任选其一}该属性的设置与flex-direction属性相关，后面的值会被flex-direction:row;判断，五个值分别是:flex-start：指的是起始位置在主轴方向的对齐方式，flex-direction:row；在这种情况下，子元素左对齐。尽可能清空右侧；[1,2,3,_____]flex-end：指主轴方向的结束位置对齐，flex-direction:row；条件下，子元素右对齐；可以离开左边。[______,1,2,3]center：指对齐主轴中心位置，flex-direction:row;条件下，子元素居中；尽量在左右两侧留出相同的空间；[___1,2,3,___]space-between：表示主轴左右两边没有间隙，子元素之间的间隙相等；[1,___,2,___,3]space-around：表示主轴左右两边也有空隙。所有的子item两边距离相等，均匀分布在主轴上，所以item之间的间隔是item到边的间隔的两倍。[_,1,__,2,__,3,_]align-items定义项目在横轴上的对齐方式。root{对齐项目：flex-start|弹性端|中心|基线|stretch;}默认值为stretch，这五个值：flex-start是指子元素之间在交叉轴方向上的对齐方式是在交叉轴的起点对齐；flex-end指的是交叉轴上的对齐方法是交叉轴的重点对齐；center在交叉轴的方向上与交叉轴的中心对齐。baseline是第一行文本在横轴方向上的基线对齐方式。拉伸在横轴上。如果子项的高度没有设置或者设置为auto，则会占据整个容器的高度。align-content定义多个轴的对齐方式。如果项目只有一个轴，则此属性将不起作用；当你设置flex-wrap为nowrap时，容器中只有一个轴，因为item不会wrap，所以不会有多个轴。当你的flex-wrap设置为wrap时，容器中可能有多个轴。这时候就需要设置多个轴之间的对齐方式。创建主轴为水平时的测试，即flex-direction:row,flex-wrap:wrap.root{align-content:flex-start|弹性端|中心|间隔|环绕空间|stretch}flex-start：行向flex容器的开始堆叠。弹性容器中第一行的交叉起始边缘接触弹性容器的交叉起始边界，并且每个后续行接触前一行。flex-end：行向flex容器的末端堆叠。弹性容器中最后一行的交叉起点和终点边界接近弹性容器的交叉终点边界，并且每个后续行都接近前一行。center：行向flex容器的中间堆叠。行在flex容器内成对排列并居中，保持flex容器的交叉起始内容边界与第一行之间的距离与容器的交叉轴结束内容边界与最后一行之间的距离相等。（如果剩余空间为负，则行在两个方向溢出相等的距离。）space-between：行在flexbox容器内均匀分布。如果剩余空间为负数或flex容器中只有一行，则此值等效于'flex-start'。其他情况下，第一行的cross-startborder对着flex容器的cross-startcontentborder，最后一行的cross-endborder对着flex容器的cross-endcontentborder，其余Rows排列在flexbox窗口中以保持每对之间的空间相等的方式。space-around：每行均匀分布在flexbox容器中，两端保留子元素之间的一半空间。如果剩余空间为负数或弹性盒容器中只有一行，则此值等同于'center'。在其他情况下，行在flex容器中的排列方式是它们之间的空间相等，而第一行之前和最后一行之后的空间是另一个空间的一半。stretch：线条将伸展以占据剩余空间。如果剩余空间是负数，这个值相当于'flex-start'。在其他情况下，剩余空间由所有行平均分配以扩大它们的横轴大小。子容器flex-item有六个属性可以用在item项上：默认值为0.item{order:;}flex-basis：定义分配额外空间前item占用的主轴空间。浏览器根据这个属性计算主轴上是否有多余的空间。item{flex-basis:|auto;}默认值：auto，即item的原始大小。此时item的宽高取决于width或height的值。当主轴在水平方向时，设置flex-basis时，item的width设置值会失效。flex-basis需要配合flex-grow和flex-shrink一起使用才能发挥作用。当flex-basis值为0%时，该项目被认为具有零尺寸，因此即使将尺寸声明为140px也是无用的。当flex-basis的值为auto时，则根据size的设置值（如果是100px），剩余空间不计入100px。flex-grow定义item的放大比例。item{flex-grow:;}默认值为0，即如果还有剩余空间，则不放大；当所有item都以flex-basis的值排列后，还有剩余空间，这时flex-grow就会发挥作用。如果所有项目的flex-grow属性都为1，它们将平分剩余空间。（如果有的话）如果一个项目的flex-grow属性为2而其他项目都为1，则前者将占用其他项目两倍的剩余空间。当然，如果你发现所有item都设置为flex-basis的值后空间不够，flex-wrap:nowrap，此时flex-grow就不起作用了，此时需要下一个属性时间。flex-shrink.item{flex-shrink:;}默认值：1，即空间不足时，item会收缩，负值对该属性无效。flexflex-grow、flex-shrink和flex-basis.item的简写{flex:none|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]}这里可以看到虽然每个item的宽度都是50px，但是由于容器宽度只有200px，所以此时每个item都会按同样的比例缩小，因为默认值为1。同理可得：如果所有item的flex-shrink属性都为1，当空间不足时，会按比例缩小。如果一个项目的flex-shrink属性为0，其他项目为1，前者在空间不足时不会收缩。auto(11auto)none(00auto)1(1,,1,0%)0(0,1,0%)当flex值为长度或百分比时，视为flex-basis值，flex-grow取1，flex-shrink取1，当flex的值为两个非负数时，分别视为flex-grow和flex-shrink的值，flex-basis取0%，当flex的值为一个非负负数和一个长度或百分比分别作为flex-grow和flex-basis的值，flex-shrink取1。align-self允许单个item与其他项目有不同的对齐方式。单个item会覆盖align-items定义的属性，默认值为auto，即继承父元素的align-items属性。如果没有父元素，相当于stretch。.item{对齐自我：自动|弹性启动|弹性端|中心|基线|stretch;}这个和align-items属性是一样的，只不过align-self是对单个item有效，而align-items是对容器下的所有item都有效。