015 HTML+CSS(Class184 - 197)
[A] flex弹性布局
flex弹性盒模型
2009年。W3C提出一种新的方案---flex布局，可以简便，完整，响应式的实现各种布局。
目前他已经得到了所有的浏览器的支持，这意味着，这项功能可以被安全使用
作用在flex容器上的属性 作用在flex子元素上的属性
flex-direction order
flex-wrap flex-grow
flex-flow flex-shrink
justify-content flex-bais
align-items flex
align-content aglin-self
作用在flex容器上的属性
【注】当父元素display：flex时，子元素的margin：auto会实现上下左右居中的效果
1. flex-direction: 控制子项整体布局的方向
参数：
row 默认值，显示为行，从左向右
row-reverse 显示为行，从右向左
row 显示为列，从上向下
row-reverse 显示为列，从下向上
2. flex-wrap: 控制子项单行显示还是换行显示
参数：
nowrap 默认值，表示单行显示，不换行
【注】当内容足够在一行显示时，会自动调整宽度尽量显示，实在显示不了再一溢出
wrap 宽度不足换行显示
wrap-reverse 宽度不足换行显示，但是行是从下往上，即第一行在最下面
3. flex-flow: flex布局的flow流动特性，实际上是flex-direction和flex-wrap的缩写
第一个值表示方向，第二个值表示换行，中间用空格隔开
参数：
row wrap 从左向右以行显示，并且宽度不够时自动折行
4. justify-content: 决定主轴方向上子项的堆砌和分布方式(主轴方向即flex-direction确定的方向)
参数：
flex-start: 默认值，表示从起始位置对齐
flex-end: 表示从结束位置对齐
center: 表示居中对齐
space-between: 表示两端对齐，多余的空白部分在元素中间均匀分配
space-around: 每个子项周围均匀分配空白部分(如：1子项11子项1)
space-evenly: 空白部分在各个子项之间均匀分配(如：1子项1子项1)
5. align-iems: 决定子项相对于flex父容器在侧轴上的对齐方式
【注】所谓侧轴，即与主轴相垂直的轴
参数：
strech: 默认值，flex子项拉伸
flex-start: 表现为容器顶部对齐
flex-end: 表现为容器底部对齐
center: 表现为容器垂直居中对齐
6. aglin-content: 针对于多行的操作，与justify-content效果相似。
参数：
strech: 默认值，每一行flex子项等比例拉伸，如果有两行，则每行拉伸高度为50%
flex-start: 表现为容器顶部对齐
flex-end: 表现为容器底部对齐
center: 表现为容器垂直居中对齐
space-between: 表示两端对齐，多余的空白部分在元素中间均匀分配
space-around: 每一行享有独立且不重叠的空白空间
space-evenly: 每行元素都完全上下等分
作用在flex子项上的属性
1. order: 子项order值可以改变某一个flex子项的排序位置
默认每个子项的order值为0,值越小越靠前
2. flex-grow: 拓展子项宽度, 按比例占用剩余空白的空间，取值为0-1
当多个子项均有flex-grow设置时，按比例分配给这些子项空白区域
3. flex-shrink: 当容器空间不足时，进行子元素收缩，取值为0-1, 默认值为1
4. flex-basis: 定义在分配剩余空间之前，元素的默认大小。
参数：
像素值
5. flex: 为flex-grow flex-shrink flex-basis的复合写法
6. align-self: 单独控制某一个子项的处置对齐方式
参数：
flex-start 表现为容器顶部对齐
flex-end 表现为容器底部对齐
center 表现为容器垂直居中对齐
Grid网格布局是一个二维的布局方法，横纵总是同时存在的
作用在grid容器上 作用在grid子项上
grid-template-columns grid-column-start
grid-template-rows grid-column-end
grid-template-areas grid-row-start
grid-template grid-row-end
grid-colums-gap grid-column
grid-row-gap grid-row
grid-gap grid-area
justify-items justify-self
align-items align-self
place-items place-self
justify-content
align-content
place-content
作用在grid容器上
1. grid-template-columns: 定义网格布局的列数，需要几列，则写几个数，用空格隔开
参数：
px: 设置每列所占像素值
%: 设置每列所占百分比
auto: 自适应，即最后安排
fr: 设置fr值，如1fr，2fr,...
【注】fr为网格单位值，按照比例分配，
当fr值之和不满1时，父元素会有空白流出
当网格数量比较多时，可用repeat简化书写
如：grid-template-columns: repeat(4, 1fr) 即生成4列
2. grid-template-rows: 定义网格布局的行数，需要几行，则写几个数，用空格隔开
参数：
px: 设置每行所占像素值
%: 设置每行所占百分比
auto: 自适应，即最后安排
fr: 设置fr值，如1fr，2fr,...
【注】fr为网格单位值，按照比例分配，
当fr值之和不满1时，父元素会有空白流出
当网格数量比较多时，可用repeat简化书写
如：grid-template-rows: repeat(4, 1fr) 即生成4列
3. grid-template-areas: 给网格划分区域，并通过grid-area指定每个子项的隶属区域
在父容器中：3列4行
{
display: grid;
grid-template-columns: .4fr .2fr .1fr;
grid-template-rows: 25% 25% 25% 25%;
grid-template-area:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3"
}
在子项中：
:nth-child(1){ grid-area: a1}
:nth-child(2){ grid-area: a2}
:nth-child(3){ grid-area: a3}
【实现过程】1. 父容器中，通过grid-template-area给每一个网格赋予一个特定的标识符，
标识符相同表示同一区域。
2. 子项中，通过grid-area将网格与子元素匹配起来。
grid-template: 为grid-template-columns，grid-template-rows和grid-template-areas的复合写法
【实现】：
{
grid-template:
"a1 a1 a1" 1fr // 第1行
"a2 a2 a3" 1fr // 第2行
"a2 a2 a3" 2fr // 第3行
/1fr 1fr 1fr;
// 第1列 第2列 第3列
}
4. grid-column-gap: 定义网格列之间的间隙
参数：
px: 像素值
5. grid-row-gap: 定义网格行之间的间隙
参数：
px: 像素值
grid-gap: 为grid-column-gap何grid-row-gap的复合写法
参数：
px px 分别定义行，列之间的间隙
6. justify-items和align-items 分别指定网格元素内容的水平呈现方式和垂直呈现方式
参数：
stretch 默认值，水平/垂直拉伸填充
start 表现为容器左侧/顶部对齐
end 表现为容器右侧/底部对齐
center 表现为容器水平/垂直居中对齐
【注】place-items为justify-items和align-items的复合写法
如：place-items: start end //行 列
7. justify-content和align-content 分别指定网格元素的水平分布方式和垂直分布方式
参数：
stretch 默认值，水平/垂直拉伸填充
start 表现为容器左侧/顶部对齐
end 表现为容器右侧/底部对齐
center 表现为容器水平/垂直居中对齐
space-between 表现为两端对齐
space-around 表现为享有独立不重叠的空白空间
space-evenly 表现为空白空间平均分配
【注】place-content为justify-content和align-content的复合写法
如：place-content: start end //行 列
作用在grid子项上
1. grid-column-start 水平方向占据的起始位置
2. grid-column-end 水平方向占据的结束位置
3. grid-row-start 垂直方向占据的起始位置
4. grid-row-end 垂直方向占据的结束位置
5. grid-column 水平方向起始和结束位置的复合写法
6. grid-row 垂直方向起始和结束位置的复合写法
7. grid-area 以上1-4的复合写法,名字和位置两种写法
位置写法如：
grid-area: 3 / 2 / 4/ 5
分别为：行起始 / 列开始 / 行结束 / 列结束
8. justify-self 单个网格的水平对齐方式
9. justify-self 单个网格的垂直对齐方式
place-self为justify-self和justify-self的复合写法
