flext布局中的align-content和align-items
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。取值为flex-start | flex-end | center | space-between | space-around | stretch;
1.什么时候会有多根轴线？答案是flex-wrap的值为wrap
2.有多根轴线时该属性就会生效吗？答案是不，只有当flex容器有高度时才会生效
3.和align-items的区别是什么？
align-items属性是针对单独的每一个flex子项起作用
align-content属性是将flex所有的子项作为一个整体起作用
当同时设置两个属性时，align-items会失效
示范代码如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.flex {
width: 100px;
margin: 10px;
text-align: center;
border: 2px solid #9a9a9a;
display: flex;
flex-wrap: wrap;
height: 400px;
}
.flex>div {
width: 40px;
flex-shrink: 0;
}
.i1 {
background-color: #ffb685;
}
.i2 {
background-color: #fff7b1;
}
.i3 {
background-color: #b1ffc8;
}
.i4 {
background-color: #b1ccff;
}
style>
head>
<body>
<div class='flex'>
<div class='i1'>1div>
<div class='i2'>2div>
<div class='i3'>3div>
<div class='i4'>4div>
div>
body>
html>
在.flex中设置align-items:center后的效果如下图：
设置aligin-content:center后的效果如下：