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; }
