1、什么是 Flex 布局？
Flex 布局又为弹性布局，所谓弹性，就很大的提供了页面布局的灵活性。
我们可以把一个容器（div、span等），设置它的 CSS 的 display 属性为 flex 之后，我们就可以使用 Flex 的布局方式了。
PS：一旦容器设置display: flex布局之后，我们使用的传统布局中的float、vertical-align、clear等属性就完全失效了。但是我们可以通过 Flex 设置的属性去进行布局。
2、认识 Flex 布局
因为我们再用传统布局的时候，对齐元素进行垂直居中，代码特别的麻烦，为了更好的解决这个问题，Flex 布局就规定设置横、纵两个方向，我们无论在水平排列还是垂直排列的时候，这样写起来更方便了。
而且 Flex 布局设置了三个位置，左边、中间、右边，而且都有对应的属性，就可以很轻松的设置元素的位置了。
光说不练假把式，我们就开始动手写代码实践一下，跟着小鹿一起打开编译器。
3、容器的基本属性
4、容器内单个元素属性
我们上边是针对外容器的一些属性设置，我们下边的一些属性是针对于容器内元素的一些属性设置。让我们呢一个个来看一下最常用的。
4.1 flex-grow
该属性主要用来定义元素的放大比例，它的默认值是 0。
原文链接https://blog.csdn.net/qq_36903042/article/details/103227104