什么是弹性布局？
弹性布局又称弹性盒子，伸缩盒子，是css3中的有一种布局方法，主要用来代替浮动float来完成页面布局；可以使元素具有弹性，可以根据浏览器窗口的大小，进行自适应的放大缩小。
弹性容器：
要使用弹性布局，就必须先将一个元素设置为弹性容器；
我们可以通过 display 来设置弹性容器；display ：flex ；设置为块级弹性容器； display ：inline-flex ；设置为行内弹性容器，这两个的区别是：flex 独占一行，后面的元素将另起一行显示，而 inline-flex 可以和其他元素同占一行。
当一个元素设置 display ：flex ; 后，将自动成为弹性容器，它后面的子元素将成为弹性元素，将自动排成一行；
<style>
ul {
width: 1000px;
border: 5px solid #63d5f1;
display: flex; /*设置为弹性布局*/
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
我们可以通过给弹性容器设置 flex-direction ：来设置弹性容器中弹性元素的排列方向；
flex-direction : row ; 默认值；弹性元素在弹性容器中水平排列（从左向右）；
flex-direction : row-reverse ; 弹性元素在弹性容器中水平反向排列（从右向左）；
flex-direction : column; 弹性元素在弹性容器中纵向垂直排列（从上向下）；
flex-direction : column-reverse; 弹性元素在弹性容器中反向垂直排列（从下往上）；
弹性元素：
弹性容器的子元素称之为弹性元素，也叫弹性项；一个元素可以同时设置为弹性容器或者弹性元素
