flex 容器   父元素

容器有两个方向。主轴和交叉轴（align-items）

display:flex -子元素会变成行内块级元素，默认子元素沿着主轴排列。

子元素的高度没有设置的情况下，高度就是父元素的高度

flex-direction: column;  转向   纵轴   纵向布局

flex-direction: row;  转向   横轴   横向布局   默认

flex-direction: column-reverse;  纵轴逆向

flex-direction: row-reverse;  横轴逆向

justify-content: space-around;  周边都用空白

justify-content: space-between;  拉伸靠边

justify-content: space-evenly;  均匀分配空白

justify-content: center;

align-items: flex-start //  子元素的高度变成内容的高度

**flex-wrap: wrap(换行) | nowrap（不换行，默认）| **

空间如果放不下，会根据宽高的数值，等比例缩放，放置。

设置间距

flex 项目(item)  子元素

• order  决定项目的排序   值默认是 0，可以是正负数
• flex-grow 默认值是 0  不放大。符合固定定位。值是数字，设置该属性的子元素分配，未被分配的空间，各自按照自己所占比例分配剩余空间。
• flex-shrink  默认值是 1  空间不足的时候进行缩小。值设置为 0，不缩小，就是固定定位的样子了。
• flex-basis :就是项目的长度(width) <auto、%、px、em>
• **flex**  **默认值为  ** 0 1 auto
  • flex 是三个值的组合，弹性布局时，多只用第一个属性(flex-grow)。
  • flex:0 0 200px  就是一个标准的固定定位元素
• align-self 就是单独设置子某一个子元素垂直方向的对其方式。(center、flex-start、flex-end、auto(继承父元素的  align-items, 如果没有父容器则为 “stretch”。)stretch => 元素被拉伸以适应容器。
  • )