前言

在日常工作中，我们作为前端最经常会遇到的就是页面布局的问题，
不同的分辨率都会影响页面展示也会影响用户体验

flex

所有父级都会设置display:flex，根据需求，添加flex相关样式

flex-direction：{
        1. row：默认从左到右
        2. row-reverse：反转，从右到左，内容也会翻转
        3. cloumn：主轴设为侧轴，默认从上到下
        4. cloumn-reverse：侧轴反转，从下到上，内容也会反转
} 
justify-concent：{
        1. flex-start :默认从左到右
        2.flex-end：从右到左
        3. center：居中
        4. space-around：环绕，平分剩余空间
        5. space-between：两边贴边，在分配剩余空间（圣杯）
        
}
align-item：{ 只针对单行
        1. flex-start
        2. flex-end
        3. center
        4. stretch  // 拉伸 不常用 了解即可
}
align-content：{多行（换行时）
        1. flex-start
        2. center
        3. space-between
        4. space-around
        5. strech
}
flex-flow：{换行
        1. cloumn:wrap
        2. row: wrap
}