display:flex

元素在x方向走,元素y不一样[高度]。可以用对齐。align-items. align-self 自身调节
元素在x方向走,元素在x方向距离.justify-content .   
元素在x方向走,x方向所有元素向y走.align-content[以最高元素决定，最高元素撑到全屏。就不起作用],一行不起作用

justify-content 单元素对行或列方式

align-content 行或列对父元素方式
align-items 行或列对齐，不同高或宽才起作用.

flex-start flex-end center 

strech,baseline

flex-around flex-between

 

#container div {
height: 200px;
width: 60px;
}
#test1 {
background-color: blue;
flex-shrink: 1;
}
#test2 {
background-color: yellow;
flex-shrink: 0.5;
}
<div id="test1">: width = 60 - 20 * 1 / (1 + 0.5) = 47px
<div id="test2">: width = 60 - 20 * 0.5 / (1 + 0.5) = 53px