CSS弹性布局

        一、布局

display: flex;
属性要写在父盒子上

                1、子盒子水平方向排列方式

justify-content: space-evenly;

center：居中
space-between: 两端对齐，中间自适应
pace-around：两端对齐，中间自适应。两端留空，值为中间空的一半
space-evenly：均匀分布

                2、子盒子排列方向

flex-direction: column-reverse;

flex-direction  子盒子排列方向
默认 row ： 横向排列
column ：纵向排列
row-reverse： 横向从右往左
column-reverse：纵向由下往上

                3、子盒子纵向排列方式：

align-items: baseline;


center：居中
flex-end：靠下排列

二、BFC布局 和 响应式

@media screen and (max-width: 800px) and (min-width:600px){
            div{
                width:400px;
                height: 200px;
                background-color: red;
            }
            
        }
        @media screen and (max-width: 600px) {
            div{
                width:200px;
                height: 100px;
                background-color: blue;
            }
            
        }