弹性盒布局

弹性属性写在父元素身上 ---对子素生效
定义弹性盒
display：flex；
定义排列的方向---主轴的方向：  row左右排列   column上下排列 reverse反向
flex-direction：row；
flex-direction：column
fLex-direction: column-reverse;（上下）
fLex-direction:row-reverse；（左右）
主轴方向对其的方式
justify-content: center;（居中）
justify-content: space-between;（两端对齐，两边没有间距）
justify-content : space-around; （两端对齐---两边是中间间距的一半）
justify-content: space-evenly;   （两端对齐--两边和中间间距是一样的）
justify-content: flex-start;      （靠左）
justify-content:flex-end;            （靠右）
侧轴--交叉轴
align-items: cerfter;  （居中--主要针对不换行的时候使用）
align-items:flex-end；（最下)
align-items:flex-start；（最上）
当子元素的宽度之和大于父元素的时候，子元素会自动收缩
flex-wrap:wrap;   (当子元素超出父元素后自动换行----默认不换行)
align-content:center; (主要针对换行的时候  交叉轴的对齐方式)
align-content:flex-start / center / flex-end / space-around / space-between /space-evenly主要针对换行的时候-交叉轴的对齐方式

弹性布局的使用方式