弹性布局
语法:display:flex;【块级元素】 display:inline-flex;【行内元素】
flex-direction row【水平垂直方向】
// row 默认效果【从左到右排序】
// row-reverse 改变方向【从右到左排序】
flex-direction column【垂直方向】
// column 默认效果【从上到下排序】
// column-reverse 改变方向【从下到上排序】
flex-wrap wrap【换行】
// nowrap 默认格式【不换行】
// wrap 换行【第一行在上方】
// wrap-reverse 换行【第一行在下方】
justify-content 【垂直对齐方式】
// flex-start 默认对齐效果 【左对齐】
// flex-end 对齐效果 【右对齐】
// center 对齐效果 【垂直居中对齐】
// space-between 对齐效果 【两端对齐】
// space-around 对齐效果 【两端间隔比较小 元素中间间隔比较大】
// space-evenly 对齐效果 【两端间隔比较大 元素中间间隔比较小】
align-items 【水平对齐方式】
// flex-start 默认对齐效果 【水平向上对齐】
// center 对齐效果 【水平居中】
// flex-end 对齐效果 【水平向下对齐】
// stretch 默认值 【会撑满这个高度 前提父级高度设置为 auto;】