flex布局align-items和align-content的区别
1、align-items是针对每一个子项起作用，它的基本单位是每一个子项，在所有情况下都有效果
2、align-content属性是将flex子项作为一个整体起作用，它的基本单位是子项构成的行
只在两种情况下有效果：
①子项多行且flex容器高度固定
②子项单行，flex容器高度固定且设置了flex-wrap:wrap
主轴为flex-deriction定义的方向，默认为row
交叉轴跟主轴垂直即为column，反之它们互调
justfiy-content：应用于flex容器，设置flex子项（flexitems）在主轴上的对齐方式。
不同取值的效果如下所示：
align-items：应用于flex容器，设置flex子项在每个flex行的交叉轴上的默认对齐方式。
不同取值的效果如下所示：
align-content：只适用多行的flex容器（子项不止一行时该属性才有效果），它的作用是当flex容器在交叉轴上有多余的空间时，将子项作为一个整体（属性值为：flex-start、flex-end、center时）进行对齐。不同取值的效果如下所示：
第2部分：实例演示
例1效果图：
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolid#9a9a9a;display:flex;}
.flexdiv{width:px;margin:5px;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
/div
结论1：
在flex布局中，有默认属性：align-items:normal;和align-content:normal;
效果为顶部对齐。
例2效果图：
设置align-items:center
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;align-items:center;}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
/div
结论2：
容器的高度为最高子项的高度，同一行的所有子项全都在交叉轴上居中对齐，即子项的高度中线与flex交叉轴中线重合。
例3效果图：
设置align-content:center
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;align-content:center;}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
/div
结论3：
flex容器不设置高度并且子项只有一行时，align-content属性是不起作用的。
与初始状态并没有区别
例4效果图：
flex容器设置高度
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;height:px;}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
/div
结论4：
外层容器的高度增加，但是子项和flex容器不设置高度一样。
例5效果图：
设置align-items:center
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;height:px;align-items:center}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
/div
结论5：
同一行的子项全部在交叉轴上居中对齐，与flex容器高度不设置时的效果一样（只不过此时高度最大的子项也居中对齐了）。
例6效果图：
设置align-content:center
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;height:px;align-content:center}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
/div
结论6：
align-content:center;并没有起作用，效果与初始状态一样。
例7效果图：
子项为多行的情况
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;flex-wrap:wrap;}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
.flexdiv.eg5{background-color:#c8b1ff;height:40px;}
.flexdiv.eg6{background-color:#ffb1e5;height:80px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
divclass="eg5"5/div
divclass="eg6"6/div
/div
结论7：
多行或单行，浏览器默认：align-items:normal;和align-content:normal;效果为顶部对齐。
每一行的高度为该行子项中高度最大的那个值。
例8效果图：
设置align-items:center
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;flex-wrap:wrap;align-items:center;}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
.flexdiv.eg5{background-color:#c8b1ff;height:40px;}
.flexdiv.eg6{background-color:#ffb1e5;height:80px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
divclass="eg5"5/div
divclass="eg6"6/div
/div
结论8：
各行子项都在各自行上居中对齐（各行的高度由最高的子项决定，flex容器的高度为所有行的高度最高的子项高度之和）。
例9效果图：
设置align-content:center
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;flex-wrap:wrap;align-content:center;}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
.flexdiv.eg5{background-color:#c8b1ff;height:40px;}
.flexdiv.eg6{background-color:#ffb1e5;height:80px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
divclass="eg5"5/div
divclass="eg6"6/div
/div
结论9：
与初始状态一样，align-content:center并没有起作用，因为此时是以所有子项作为一个整体，而flex容器并没有指定高度（flex容器的高度即为子项整体的最大高度），所以flex容器在交叉轴上没有多余的空间，那么子项整体自然而然也就没有在交叉轴上对齐的说法了。
例10效果图：
flex容器设置高度
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;flex-wrap:wrap;height:px;}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
.flexdiv.eg5{background-color:#c8b1ff;height:40px;}
.flexdiv.eg6{background-color:#ffb1e5;height:80px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
divclass="eg5"5/div
divclass="eg6"6/div
/div
结论10：
由浏览器的默认值确定。
例11效果图：
设置align-items:center
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;flex-wrap:wrap;height:px;align-items:center}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
.flexdiv.eg5{background-color:#c8b1ff;height:40px;}
.flexdiv.eg6{background-color:#ffb1e5;height:80px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
divclass="eg5"5/div
divclass="eg6"6/div
/div
结论11：
flex容器将交叉轴上的多余空间按行数平均分给每行，然后每行各自按自己所在的行居中对齐
例12效果图：
设置align-content:center
Html+css代码：
.styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;flex-wrap:wrap;height:px;align-content:center}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
.flexdiv.eg5{background-color:#c8b1ff;height:40px;}
.flexdiv.eg6{background-color:#ffb1e5;height:80px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
divclass="eg5"5/div
divclass="eg6"6/div
/div
结论12：
flex容器指定高度且子项为多行时，align-content:center将子项作为一个整体，然后这个整体在flex容器的交叉轴上居中对齐的。
例13效果图：
当子项为单行，flex容器有固定的高度且设置了flex-wrap:wrap;时，align-content:center;
对单行的子项也有作用。
Html+css代码：
styletype="text/css"
.flex{width:px;margin:10px;text-align:center;border:2pxsolidred;display:flex;flex-wrap:wrap;height:px;align-content:center}
.flexdiv{width:px;margin:5px;font-weight:;font-size:20px;text-align:center;}
.flexdiv.eg1{background-color:#ffb;height:px;}
.flexdiv.eg2{background-color:#fff7b1;height:50px;width:px;}
.flexdiv.eg3{background-color:#b1ffc8;height:px;}
.flexdiv.eg4{background-color:#b1ccff;height:60px;}
/style
divclass="flex"
divclass="eg1"1/div
divclass="eg2"2/div
divclass="eg3"3/div
divclass="eg4"4/div
/div
结论13：
当子项为单行且flex容器有固定的高度且设置了flex-wrap:wrap;align-content:center;
对单行的子项也有作用。将单行的子项作为一个整体在交叉轴居中了。