CSS布局总结（一）

前言：今天是学校为期六周的实训第一天，实训课感觉很水，第一天讲的竟然是HTML...实训老师丢了一个静态页面给我们做。感觉很久没写过这种东西，突然觉得自己的基本功很渣。布局这方面感觉需要总结一下，然后再去把做好的网站页面做成响应式的吧。

一、文档流布局（与display有关）

• none；
• block；
• inline-block。

二、浮动布局（与float有关）

三、定位布局（与display有关）

• static；
• relative；
• absolute；
• fixed。

四、flex布局

flex 在IE浏览器上只支持 ie 10+，设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

   .ele{
       display: -webkit-flex;
       display: flex;
       display: inline-flex;
       display: -webkit-inline-flex;
   }

（1）父容器

• flex-direction:主轴的方向；
• flex-wrap:子元素超过父容器之后的怎么排列；
• flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式。；
• justify-content：子元素在主轴的排列方向；
• align-items：子元素在交叉轴的排列方向；
• align-content：多根轴线的对齐方式。

具体用法：

.ele {
  flex-direction: row;                // 默认值，主轴为水平方向，起点在左端。
  flex-direction: row-reverse;        // 主轴为水平方向，起点在右端。
  flex-direction: column;             // 主轴为垂直方向，起点在上。
  flex-direction: column-reverse;     // 主轴为垂直方向，起点在下。
}


.ele {
 flex-wrap: nowrap;          // 默认，不换行
 flex-wrap: wrap;            // 换行，第一行在上方。
 flex-wrap: wrap-reverse     // 换行，第一行在下方。
}


.ele{
    justify-content: flex-start;      // 默认，左对齐
    justify-content: flex-end;        // 右对齐
    justify-content: center;          // 居中
    justify-content: space-between;   // 两端对齐，项目之间的间隔都相等。
    justify-content: space-around;    // 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

}


.ele {
  flex-flow: <flex-direction> || <flex-wrap>;
}


.ele{
    align-items: flex-start;    // 交叉轴的起点对齐。
    align-items: flex-end;      // 交叉轴的终点对齐。
    align-items: center;        // 交叉轴的中点对齐。
    align-items: baseline;      // 项目的第一行文字的基线对齐。
    align-items: stretch;       // 默认，如果项目未设置高度或设为auto，将占满整个容器的高度。
}


.ele{
    align-content: flex-start;   // 与交叉轴的起点对齐
    align-content; flex-end;     // 与交叉轴的终点对齐。
    align-content: center;       // 与交叉轴的中点对齐。
    align-content: space-between;// 与交叉轴两端对齐，轴线之间的间隔平均分布。
    align-content: space-around; // 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    align-content: stretch;     // 默认 轴线占满整个交叉轴。
}

（2）子元素

• order：子容器的排列顺序；
• flex-grow：当父容器中有剩余空间时，按子元素设置的flex-grow，按比例进行拉伸子元素；
• flex-shrink：默认不换行的情况下，子元素超过父容器，则按照子元素设置的flex-shrink，按比例缩小子元素；
• flex-basis：子容器在不伸缩情况下的原始尺寸，即与width相同，但优先级比width高，若有一个为auto，则不为auto的优先级高；
• flex：子元素的 flex 属性是 flex-grow,flex-shrink 和 flex-basis 的简写；
• align-self：属性允许单个项目有与其他项目不一样的对齐方式。

具体用法：

.ele{
   order: num; 
}

.ele{
    flex-grow: <number>; /* default 0 */
}

.ele{
    flex-shrink: <number>; /* default 0 */
}

.ele{
    flex-basis: <length> | auto; /* default auto */
}

.ele{
    align-self: auto;             // 继承父元素的 align-items 属性
    align-self: flex-start;       // 交叉轴的起点对齐。
    align-self: flex-end;         // 交叉轴的终点对齐。
    align-self: center;           // 交叉轴的中点对齐。
    align-self: baseline;         // 项目的第一行文字的基线对齐。
    align-self: stretch;          // 默认，如果项目未设置高度或设为auto，将占满整个容器的高度。
}

五、网格布局

grid可以实现flex实现不了的二维布局

（1）基本概念：

• 网格线即每条线；
• 网格轨道即两条线之间的空间；
• 单元格是四条网格线直接的空间，它是网格的最小单位；
• 网格区域是由任意四条网格线组成的空间，包含一个或多个单元格。

（2）代码解析

• 3行4列（也可以使用fr作为单位）

        .grid-container{
            display: grid;
            grid-template-rows: 50px 80px 100px;   
            grid-template-columns: 50px 40px 100px 80px;
        }

• 第一行的的高度在100-200px之间，第二行的高度在50-200px之间，由于两者的最大高度之和超过300px,故都取最小高度，则300-100-50=150；

　　　则第一行的高度为：100+150/2=175；第二行的高度为：50+150/2=125

　　

        .grid-container{
            display: grid;
            grid-template-rows: minmax(100px,200px) minmax(50px,200px);
            grid-template-columns: 1fr 1fr 2fr;
            height: 300px;
        }

• 2行3列，repeat（个数，大小）

        .grid-container{
            display: grid;
            grid-template-columns: repeat(2,100px);
            grid-template-rows: repeat(3,100px);
        }

• grid-column-gap：创建列与列之间的距离。
  grid-row-gap：行与行之间的距离。

        .grid-container{
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(2,100px);
            grid-template-rows: repeat(3,100px);
            grid-column-gap: 50px;
            grid-row-gap: 15px;
            background: pink;
        }

• item1 在第2-3条行网格线、第2-3列网格线之间，一共3行2列，即item在第四个格子。

        .grid-container{
            padding: 20px;
            display: grid;
            grid-template-columns: repeat(2,100px);
            grid-template-rows: repeat(3,100px);
            grid-column-gap: 50px;
            grid-row-gap: 15px;
            background: pink;
        }
        .item{
            border: 2px solid palegoldenrod;
            color: #fff;
            text-align: center;
            font-size: 20px;
        }
        .item1{
            grid-row-start: 2;
            grid-row-end: 3;
            grid-column-start: 2;
            grid-column-end: 3;
            background: #fffa90;
            color: #000;
        }

• grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3;

等价于：

   grid-row: 2; 
   grid-column: 3 / 4;

• 合并表格单元

.item1{
            grid-column-start: 1;
            grid-column-end: 3;
            grid-row-start: 2;
            grid-row-end: 4;
        }