弹性布局与其他布局

弹性布局

.box1{
            width: 1000px;
            height: 700px;
            margin: 15px auto;
            border: 5px solid;
            /* 弹性布局 写在父元素中*/
            display: flex;

换行(flex-wrap)

/* 改为弹性盒子之后默认超过会挤压子元素宽度，我们就需要用到换行*/
            /* 换行(flex-wrap)
                    wrap-----------换行
                    nowwrap-------不换行(默认)
                    wrap-reverse----改变朝向  下~上 左~右
            */
            flex-wrap: wrap;

改变子盒子排列方向(flex-direction)

        /* 改变子盒子排列方向(flex-direction) 
                row     ---默认，横向从左到右排列
                column      ------纵向从上到下、从左到右排列
                row-reverse     ----横向从右到左排列
                column-reverse  ----纵向从下到上、从左到右排列
        */
        flex-direction: row;

        /* 换行(flex-wrap)与改变子盒子排列方向(flex-direction) 可以简写,使用
            flex-flow :
                    值为换行(flex-wrap)、改变子盒子排列方向(flex-direction)的值
        */
        /* flex-flow: wrap column; */

子盒子的排列方式(justify-content)

        /* 子盒子的排列方式(justify-content)
                flex-start          -----默认，左对齐
                flex-end            -----右对齐
                center              -----居中
                space-between       -----两端对齐不留空，中间自适应
                space-around        -----两端留空、中间自适应、两端值为中间空的一半
                space-evenly        -----两端留空、中间自适应、两端值和中间空一样
        */
        justify-content: space-evenly;

多轴线对齐方式(align-content)

        /* 多轴线对齐方式(align-content) 
                center          -----垂直居中
        */
        /* align-content: center; */

定义在交叉轴上如何对齐(align-items)

        /* 定义在交叉轴上如何对齐(align-items) 
                stretch         -----默认、填满
                flex-start      -----起点对齐
                flex-end        -----终点对齐
                center          -----中点对齐
                baseline        -----第一行文字基线对齐
        */
        /* align-items: baseline; */

        /* 可以单独设置与其他子标签不同的对齐方式，可覆盖align-items属性
               align-self: auto(其它与align-items属性一至)  */
        align-self: auto;

        /* 

其他布局

        其他布局：
            固定布局：固定宽度
            流体布局：主体用百分比，可以自适应分辨率
            浮动布局：可以分为 固定浮动布局、流体浮动布局
            定位布局：可以分为 固定定位布局、流体定位布局
            多列布局：css3新增，一般用不上
            BFC布局：
                触发BFC规范的元素，可以形成一个独立的容器，不受外界的影响，从而解决一些布局问题
                触发：      除none以外的浮动元素
                            绝对定位
                            display
                            除visible的overflow
        */

        /* 响应式布局：@media */
        @media screen and (max-width:800) {
            background-color: aliceblue;
            
        }