2019-01-15

一、 栅格Grid

栅格定义

   

       
人生
   

• 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代码

• 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代码

  
  
1
  
2
  
3

容器宽度设置为：90px
容器宽度设置为：180px
容器宽度设置为初始宽度270px

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