css弹性布局

/* 弹性布局 */

                display: flex;

            /* 是否换行 */

            flex-wrap: nowrap;

            /* 子盒子水平方向排列方式  center居中 space-between两端对齐 space-around两端对齐中间自适应两端留空值为中间空的一半 space-evenly 均匀分布*/

                justify-content: center;

                justify-content: space-between;

                justify-content: space-around;

                justify-content: space-evenly;

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

                flex-direction: row;

                flex-direction: column;

                flex-direction: row-reverse;

                flex-direction: column-reverse;

            /* 子盒子纵向排列方向  center居中 flex-end考下排列 baseline靠上排列*/

                align-items: center;

                align-items: flex-end;

                align-items: baseline;

            /* 垂直居中 */

            align-content: center;

            /* bfc布局 触发bfc规则的元素 可以形成一个独立的容器 不受外界的影响 从而解决一些布局问题   面试题*/

            /* bfc滚动条  hidden溢出隐藏 scroll强制出现滚动条 auto内容超过则出现滚动条 内容不溢出则没有滚动条*/

                overflow: auto;

                overflow: hidden;

                overflow: scroll;

            /* 面试题

                普通盒子模型和怪异盒子模型

                1.设置了边框和内边距当前盒子的宽高会增加上边框和内边框

                2.ie默认不包含如果要让盒子的宽高包含边框和内边框需要加box-sizing：content-box

                */

            /* 相应布局 媒体查询，实现*/

            @media screen and(max-width:800px) and(min-width:600px) {
                /* 属性 */

            }

        }