一. Flex 布局
Flexible Box模型，通常被称为 flexbox，是一种一维的布局模型。说 flexbox 是一种一维的布局，是因为一个 flexbox** 一次只能处理一个维度上的元素布局，一行或者一列。**作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。
二. Flex 容器
Flex容器 我们把一个容器的
display属性值改为flex或者inline-flex。该容器就变为了 Flex 容器。
<1> 两根轴线 flex-direction
两根轴线 ----主轴和交叉轴！！主轴由
flex-direction定义，另一根轴自动伪垂直于它的。
主轴由 flex-direction 属性定义：四个值
- row
- row-reverse
- column
- column-reverse
按照各自语言的书写模式，来定义主轴的起始线，比如：大多数文字eg：英文，都是从左向右书写的，所以它的主轴设置为
row，值就默认为主轴的起始线在左，但eg：阿拉伯文，是从右往左书写的，所以它的主轴设置为row，值就默认为主轴的起始线在右！！
<2> 是否换行 flex-wrap
- wrap : 换行，您的项目太大而无法全部显示在一行中，则会换行显示。
- nowrap（默认值） ：它们将会缩小以适应容器，如果flex元素设置属性为不可缩小，则会溢出！！
<3> 简写属性 flex-flow
flex-flow。第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.
<4> 交叉轴上的对齐方式 align-items
- strech（默认值） 会进行拉伸，占满主轴的高度（如果只有一行的话，就是拉伸至与父元素flex容器一样高）
- flex-start 按 flex 容器的顶部对齐
- flex-end 按 flex 容器的底部对齐
- center 在交叉轴上居中对齐
<5> 元素在主轴上的对齐方式 justify-content
- stretch
- flex-start
- flex-end
- center
- space-around
- space-between
三. Flex 元素
为了更好地控制 flex 元素，有三个属性可以作用于它们：
<1> flex-grow 占用剩下的可用空间延伸自己
若被赋值为一个正整数，flex 元素会以
flex-basis为基础，使该元素延展，并占据此方向轴上的可用空间（available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。
eg： flex-grow 属性可以按比例分配空间。如果第一个元素 flex-grow 值为 2，其他元素值为 1，则第一个元素将占有 2/4（上例中，即为 200px 中的 100px）, 另外两个元素各占有 1/4（各 50px）。
<2> flex-shink 可以让它缩小所占空间（只有在 flex 元素总和超出主轴才会生效）
如果我们的容器中没有足够排列 flex 元素的空间，那么可以把 flex 元素
flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制 flex 元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。
<3> flex-basis 定义了该元素的空间大小
如果不设置，默认为元素本身的尺寸！！
注意：
flex 元素是在这个基准值的基础上缩放的
<4> 简写 flex
三个数值按这个顺序书写 — flex-grow，flex-shrink，flex-basis。
-
flex: initial是把 flex 元素重置为 Flexbox 的初始值，它相当于flex: 0 1 auto。在这里flex-grow的值为 0，所以 flex 元素不会超过它们flex-basis的尺寸。flex-shrink的值为 1, 所以可以缩小 flex 元素来防止它们溢出。flex-basis的值为auto. Flex 元素尺寸可以是在主维度上设置的，也可以是根据内容自动得到的。 -
flex: auto等同于flex: 1 1 auto；和上面的flex:initial基本相同，但是这种情况下，flex 元素在需要的时候既可以拉伸也可以收缩。 -
flex: none可以把 flex 元素设置为不可伸缩。它和设置为flex: 0 0 auto是一样的。元素既不能拉伸或者收缩，但是元素会按具有flex-basis: auto属性的 flexbox 进行布局。 -
常看到的
flex: 1或者flex: 2等等。它相当于flex: 1 1 0或者flex: 2 1 0。元素可以在flex-basis为 0 的基础上伸缩。【最常用，就可以理解为各自占的份数！！】
- 父容器（flex容器）设置主轴方向、是否换行、两根轴上的元素对齐方式！！
- 子元素（flex元素）设置自己的尺寸大小(是否延伸、缩小、所占份数...)
