flex 弹性布局

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.youkuaiyun.com/qq_36903042/article/details/103227104