Container
将容器设为弹性容器，直接子元素均为弹性元素
display: flex;
display: inline-flex;
确定主轴方向
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
关于主轴与交叉轴
flex-direction: row;
main axis is row direction
cross axis is column direction
flex-direction: column;
main axis is column direction
cross axis is row direction
元素自动换行
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
在交叉轴方向上的排布
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: baseline;
align-items: stretch;
在交叉轴方向上块级别的排布
align-content: flex-start;
align-content: center;
align-content: flex-end;
align-content: space-between;
align-content: space-around;
align-content: stretch;
在主轴方向上的排布
justify-items: flex-start;
justify-items: center
justify-items: flex-end;
justify-items: space-between;
justify-items: space-around;
justify-items: space-evenly;