css：flex布局

display: flex; --------------->在一行显示

排列方式

flex-direction：该属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。

flex-direction: row-reverse;     ----->从后往前排，横着排
flex-direction: column;     ----->从上往下排，竖着排
flex-direction: column-reverse;     ----->从下往上，竖着排
flex-direction: row;     ----->默认，从前往后排，横着排

让flex布局变为多行

flex-wrap：该属性指定 flex 元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

flex-wrap: wrap;     ----->换行
flex-wrap: nowrap;      ----->默认，不换行

主轴上的布局

justify-content：该属性定义了浏览器之间，如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间。

justify-content: center;     ----->布局在页面中间
justify-content: end;     ----->布局在页面后面
justify-content: space-between;     ----->将布局以中间对齐
justify-content:space-around;   
justify-content: space-evenly; 

侧轴的布局

align-self：该属性会对齐当前 grid 或 flex 行中的元素，并覆盖已有的 align-items 的值。在 Flexbox 中，会按照 cross axis（当前 flex 元素排列方向的垂直方向）进行排列。

align-content：该属性设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。

align-self：---------设置单行的 
align-items: center;     ----->垂直居中
align-items: end;     ----->垂直靠下
align-self: self-end;      ----->垂直靠下
align-self: start;     ----->默认，垂直靠上

align-content:   ------设置多行的 
align-content: start;     ----->默认，靠上贴住
align-content: end;     ----->靠下
align-content: center;     ----->垂直居中
align-content: space-around; 
align-content: space-between;     ----->多行的话，上下两边贴边，中间平分
align-content: space-evenly; 

flex的order属性：值越小，排列在越靠前的位置（无值，按原本结构排列），order值可以是负数，正数。默认值为0.