flex布局

默认的主轴是x轴 默认的侧轴是y轴

flex-direction: row;
/* 简单了解 翻转 */
flex-direction: row-reverse;
/* 我们可以把我们的主轴设置为 y轴 那么 x 轴就成了侧轴 */            
flex-direction: column;

设置在主轴上的排列方式

/* justify-content: 是设置主轴上子元素的排列方式 */
justify-content: flex-start;
justify-content: flex-end;
 /* 让我们子元素居中对齐 */
justify-content: center;             
/* 平分剩余空间 */           
justify-content: space-around;           
/* 先两边贴边， 在分配剩余的空间 */            
justify-content: space-between;

设置在侧轴上的排列方式
对于单行

align-items: center;
align-items: flex-start;
align-items: flex-end;
 /* 拉伸，但是子盒子不要给高度 */             
align-items: stretch;

对于多行

align-content: flex-start;

属性与主轴排列相同 但是必须要有换行

flex-wrap: wrap;

flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面

 /* 把设置主轴方向和是否换行（换列）简写 */            
 flex-flow: column wrap;

子盒子元素在侧轴上可以单独设置排列

align-self: flex-end;

也可以设置排列顺序 order 默认0越小排越前