正常流布局

就是一个块一行，自上向下

Flex布局

flex布局分为父元素和子元素，只有父元素的display属性是flex的时候，子元素的相关属性才会生效

父元素

flex-flow

是方向和换行的结合体

just-content

规定在flex的方向上的对齐方式

默认的值是左对齐，和start是一样的

普通的对齐3个，left center right 

space-around是平均分配剩余空间，使每个元素的左右空隙相同

space-between是将两边的元素拉到头，中间的元素平均分配空间

space-evenly是指所有空间都相同，包括左右离变距离，是最完美的平均分

align-items

一般父元素不设高度，那么元素就会自动排列

如果设置高度，那么是这样的

这是默认的样式，所以在flex  Y轴上也是可以调位置的

默认值是flex-start,如果改成flex-end就会跑到下面

主要讲下center,就是放中间，然后元素行上下的空隙相同

align-content

和just-content如出一辙，只不是是Y轴方向的

子元素

order

是排列顺序,,值越大，越排在前面

flex-grow

当有剩余空间的时候，那么加上这个属性就可以分配剩余空间了，默认值是0，分配的份数和你的其它元素要按比例分配，如果其它元素没有这个值那么有的就全部占领剩余空间了

flex-shrink

当flex不换行的时候，且空间不够用的时候，元素就会被压缩，这个值默认是1，是相对于其它元素被压缩的比例，如果是0就不压缩，保持原状，是2的话就是压缩是别的元素的2倍（被压缩的更厉害）

flex-basis

属性指定伸缩项的初始长度。 ，但是触发了上面的条件还是要生效的

flex

是前面3个的缩写

顺序是flex-grow, flex-shrink, and flex-basis properties.