文章目录
###注意：本篇内容毫无营养，建议阅读参考资料
一，五种经典布局
不需要知道很多实现方法，一个就够了。
1，空间居中布局
.container{//给外部的容器元素设置
display:grid;
place-items:center;//子元素垂直水平居中
//左上角布局和右下角布局将center改为start和end即可
}
2，并列式布局
多个项目并列，宽度不够就自动折行。
//外层容器元素上
.container{
display:flex;
flex-warp:wrap;
justify-content:center;
}
//内层项目个体元素上
.item{
flex:0 1 150px;//项目初始宽度150px，不可以扩大，但是当容器不足150px时，项目可以缩小
margin:5px;
}
3，两栏式布局
边栏加主栏的结构：边栏始终存在，主栏根据设备宽度变宽或者变窄。
.container{
display:grid;
grid-template-columns:minmax(150px,25%) 1fr; //将grid分成两列，第一列宽度最小为150px，最大为25%；第二列为1fr，即所有剩余宽度
}
4，三明治布局
header+main+footer：页脚始终在容器底部
.container{
display:grid;
grid-template-rows:auto 1fr auto;//第一部分和第三部分高度都为auto，即本来的内容高度；第二部分高度为1fr，即剩余的所有高度
}
5，圣杯布局
五部分：header+footer+main（由left sidebar+main content+right sidebar组成）
如果宽度太窄，主栏和右边栏会看不到。
<div class="container">
<header/>
<div/>
<main/>
<div/>
<footer/>
</div>
.container{
display:grid;
grid-template:auto 1fr auto/auto 1fr auto;// rows/columns
}
二，弹性布局（Flex）
基本的盒子模型display+position+float对于像垂直居中这种的情况不容易实现。
.container{
display:flex;
}
.container{
display:inline-flex;//行内元素使用flex布局
}
.container{
display:-webkit-flex;//webkit内核的浏览器
display:flex;
}
//设置flex布局后，子元素的float、clear和vertical-align属性将失效
采用flex布局的元素称为container、它的直接子元素称为item
容器存在主轴（main axis）和交叉轴（cross axis），项目是默认沿着主轴排列的。
1，container属性
.container{
flex-direction:row|row-reverse|column|cplumn-reverse;//主轴方向
flex-wrap:nowrap|wrap|wrap-reverse;//宽度不够换行
flex-flow:<flow-direction>||<flex-wrap>;//上面两者简写
justify-content:flex-start|flex-end|center|space-between|space-around;//主轴对齐方向
align-items: flex-start|flex-end|center|baseline|stretch;//交叉轴方向
align-content:flex-start|flex-end|center|space-between|space-around|stretch;//多根轴线的对齐方式（沿交叉轴）
}
2，item属性
.item{
order:<integer>;//数值越小，排列越靠前，默认为0
flex-grow:<number>;//放大比例，默认为0，即有剩余空间也不放大
flex-shrink:<number>;//缩小比例，默认为1，即空间不足将缩小，如果设置为0则不会缩小
flex-basis:<length>|auto;//项目占据的基准主轴空间，根据这个属性计算主轴还有多少剩余空间，默认auto即为项目本来大小
flex:<flex-grow>||<flex-shrink>||<flex-basis>;上三者简写，默认值0 1 auto;两个快捷值，auto（1 1 auto）和none（0 0 auto），简写值参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex。简单说就是1 1 0的ti'dai
align-self:auto|flex-start|flex-end|center|baseline|stretch; //项目的align-items属性，可覆盖container的设置,默认auto，即继承父元素属性，如果没父元素等同于stretch
}
三，栅格布局（Grid）
如果说弹性布局是一维线性布局，那么网格布局就是二维行列布局。我们可以使用Grid做出更加复杂的界面。
相比flex布局，我们有个新的概念：row（行）、column（列）、cell（单元格）、grid line（单元格）。
.container{
display:grid;
}
.container{
display:inline-grid;//行内元素
}
//注意：设为网格布局之后，项目的float、display：inline-block、display：table-cell、vertical-align和column-*都会失效。
1，container属性
.container{
grid-template-columns:100px 100px 100px; //每一列的列宽
grid-template-rows:100px 100px 100px;//每一行的行高，还可以使用百分比
grid-template-areas: 'a b c'
'd e f'
'g h i';//划分为9个区域，如果多单元格合并，起一个相同的名字即可，如果某些区域不用，则使用
//注意区域命名会影响网格线，每个区域的起始网格线会自动命名为去域名-start，终止网格线同理
grid-template:<grid-template-rows> <grid-template-columns>;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];//网格线名称为c1、c2、c3
row-gap: 20px; //行间距
column-gap: 20px; //列间距
gap：<row-gap> <column-gap>;
grid-auto-flow: row|column|row dense|column dense;//排列顺序，先行后列还是先列后行
justify-items:start|end|center|stretch;//单元格内容水平位置对齐方式
align-items:start|end|center|stretch;//单元格内容垂直位置对齐方式
place-items:<align-items><justify-items>;//上两个属性合并简写形式
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;//整个内容区域在容器里的水平位置
align-content: start | end | center | stretch | space-around | space-between | space-evenly; //整个内容区域在容器内的垂直位置
place-content: <align-content> <justify-content>;//上两个参数的简写形式
grid-auto-rows: 50px; //有些项目指定到现有网格的外部，这个参数是对这些浏览器新创建的网格的大小做适配
}
//repeat关键字使用
.container{
grid-template-columns: repeat(3, 33.33%);//重复三次
grid-template-columns: repeat(2, 100px 20px 80px);//重复两次某种模式
grid-template-columns: repeat(auto-fill, 100px);//单元格固定但是容器大小不固定，希望每一行或者每一列容纳尽可能多的单元格
grid-template-columns: repeat(auto-fit, 100px);//和上面的区别只出现在一行能够容纳所有单元格时，auto-fill会用空格子填满剩余宽度但是auto-fit会尽量扩大单元格的宽度
}
//fr关键字
.container{
grid-template-columns: 1fr 1fr;//两列宽度相同的意思，两者会占据整个容器
grid-template-columns: 150px 1fr 2fr;//特别适合有绝对宽度的时候，这里第一列为150px，第二列宽度是第三列的一半
grid-template-columns: 1fr 1fr minmax(100px, 1fr);//第三列最小值为100px，最大值为1fr
}
//auto关键字
.container{
grid-template-columns: 100px auto 100px;//第二列的宽度基本上等于该列单元格的最大宽度，除非单元格设置了min-max，且这个值大于最大宽度
}
2，item属性
.item-1{
//用来指定项目的位置和大小
grid-column-start: 2;//左边框是第二根垂直网格线
grid-column-end: 4;//右边框是第四根垂直网格线
grid-column-start: header-start;//还可以指定名字
grid-column-start: span 2; //左边框距离有边框跨域2个网格
grid-column: <start-line> / <end-line>;//简写形式
grid-row: <start-line> / <end-line>;
grid-area:e;//项目被放在哪个区域
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;//直接指定项目的位置
//单元格内容在单元格里的位置
justify-self: start | end | center | stretch;//水平位置
align-self: start | end | center | stretch;//垂直位置
place-self: <align-self> <justify-self>;
}
四，参考资料
只要一行代码，实现五种 CSS 经典布局 - 阮一峰的网络日志 (ruanyifeng.com)