对于是弹性布局， 需要在父级元素上。#parent{ display:flex }
如果原先定义了子元素的高度， 会变成无效， 因为默认???shrink
如果需要元素页面居中，
.item{
justify-content: center;
align-items:center;
//这两个用的很多， align-content:用的很少， 除非flex-direction;column
}
flex-shrink可以压缩内容到自动，如果不想对元素压缩， 使用width和flex-basic中定义的宽度， 需要使用flex-shrink:0
flex-grow:是对剩余空间进行填充， 所以flex-fow：2， flex-grow:1结果两个元素不是2：1,因为有flex-basic
但是如果想要两个元素2：1，flex-basic: 0;就可以了
三圣杯：
.all{
display: flex;
height: 300px;
}
.item:first-child{
background: yellow;
flex: 0 0 200px;
}
.item:last-child{
background: green;
flex: 0 0 200px;
}
.item:nth-child(2){
background: red;
flex-grow: 1;
}
flex:1 -> flex-grow:1;flex-shrink:1,flex-basic:auto