弹性魔盒：flex

父元素：

1.设置弹性盒子

display:flex; 

2.设置显示方向：

flex-direction  -ms-flex-direction  -webkit-flex-direction : 

row （水平）column（竖直）;

flex-direction:row | row-reverse|column|column-reserve

row-reverse：水平倒序
column-reserve：垂直倒序

3.设置子元素居中方式：

justify-content:（space-between space-around center） ;（左紧挨 左间距 居中）
justify-content:flex-start; 左对齐
justify-content::flex-end;右对齐

4.置垂直排列方式 ：

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

（靠上 靠下 居中 上下贴紧 上下边距 占满）

5.flex-wrap:wrap; 换行

子元素的属性:

flex-grow:0; 默认：0 ， 1 ； 0：沾满高度； 1沾满剩余空间 3：多

div{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
}
div div.left{
	width:120px;
}
div div.right{
  flex:1;
}

更多详细学习请访问https://www.runoob.com/w3cnote/flex-grammar.html