一、 栅格Grid
栅格定义
<div class="Grid Container">
<div class="Grid Items">
<p>人生</p>
</div>
</div>
- Grid Container
最外围，利用display定义为grid，相对应的子类为网格项目
display:grid; #定义为栅格
grid-template-columns:20% 20% 20% 20% 20%; # 每一列的宽度
grid-template-rows:20% 20% 20% 20% 20%； # 每一行的高度
grid-gap:1rem; # 行间距/列间距
- Grid Items
1.分列（分行等价，row）
grid-template-columns:1fr 1fr 1fr; # 3等分
grid-template:1/4； # 前三列为一列，等于合并（1-4线之间为一格）
grid-area:1/1/3/4; # 对角坐标
2.详细属性说明（column主要是竖线，row为横线）
- grid-column-start:n: # 从第n条线开始
- grid-column-end:k; # 截止到第k条线
- grid-column:i/j; # 从第i条线到第j条线
- grid-area:i/j/k/n; # 从第i横线，第j竖线到第k横线，第n竖线
- order：n； # 表示先后顺序，order越小，越优先
- grid-template:x / y ; # x为一列中的比例，y为一行中的比列，
学习地址
详细介绍：https://blog.csdn.net/hj7jay/article/details/70670467
快速学习（小游戏）：http://cssgridgarden.com/
二、Flexbox布局
创建一个flex容器
- HTML代码
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
- CSS代码
.flex-container {
display: flex; # 定义为flex布局，默认水平布局：从左到右排列
}
/* 以下为辅助样式 */
.flex-container{
background-color: #F0f0f0;
}
.flex-container .flex-item{
padding:20px;
background-color: #B1FF84;
}
.flex-container .flex-item:first-child{
background-color: #F5DE25;
}
.flex-container .flex-item:last-child{
background-color: #90D9F7;
}
1.将flex项排为一列
.flex-container {
display:flex;
flex-direction:column; # 设置为垂直布局：从上到下排列（column-reverse为垂直布局倒序）
}
2.对齐方式
.flex-container {
display:flex;
justify-content:flex-end ; # justify-content为水平对齐方式，flex-end表示末端对齐，等价于水平右浮动，center为居中对齐，space-evenly表示两个flex之间与flex与边缘之间距离相同；space-between表示任意两flex之间距离相同，为flex与边缘距离不一定相同；space-around表示人留意两个flex之间距离相同，为flex与边缘距离两倍。
align-items:center; # align-items表示垂直对齐方式，center表示居中对齐；flex-end表示底部对齐；
}
3.flex多行/多列排列
默认情况下，flex不允许多行/列排列，如果flex容器尺寸对于所有flex项来说不够大，那么flex项将被调整大小适应单行/列排列
.flex-container {
display:flex;
justify-content:space-evenly;
flex-wrap:wrap; # flex-wrap多行/多列设置，wrap表示溢出的项会排列到另一行/列；wrap-reverse表示从flex尾部开始多行排列；
}
4.flex高级操作
拉伸flex项——flex-grow
flex-grow只有在flex容器中有剩余空间时才会生效，设置值与效果如下，若有3个项 ，值分别为：0,1,2，效果如下：
0：不变
1：占用除第一个flex项外的空间的1/3
2：赵勇除第一个flex项外的空间的2/3收缩flex项——flex-shrink
flex-shrink 只有在 flex 容器空间不足时才会生效。它指定 flex 项相对于其他 flex 项将缩小多少，以使 flex 项不会溢出 flex 容器。 默认值为 1。当设置为0时，该 flex 项将不会被收缩。在这个例子中，比例是1：2，意思是在收缩时，第一项将收缩 1/3 ，而第二个项目将被收缩 2/3 。
HTML代码
<div class="flex-container">
<div class="flex-item flex-item1">1</div>
<div class="flex-item flex-item2">2</div>
<div class="flex-item flex-item3">3</div>
</div>
<button class="w90">容器宽度设置为：90px</button>
<button class="w180">容器宽度设置为：180px</button>
<button class="w270">容器宽度设置为初始宽度270px</button>
CSS代码
.flex-container {
display: flex;
}
.flex-item1{flex-shrink: 0;}
.flex-item2{flex-shrink: 1;}
.flex-item3{flex-shrink: 2;}
/* 以下为辅助样式 */
.flex-container{
width:270px;
padding:10px;
background-color: #F0f0f0;
}
.flex-container .flex-item{
padding:20px 0;
text-align: center;
width:90px;
background-color: #B1FF84;
}
.flex-container .flex-item:first-child{
background-color: #F5DE25;
}
.flex-container .flex-item:last-child{
background-color: #90D9F7;
}
- 设置flex项大小——flex-basis
