一，flex概念
flex布局对比传统布局操作方便，布局极为简单，移动端应用很广泛，但PC端浏览器支持情况较差IE11或更低版本，不支持或仅部分支持。
flex布局原理是通过给父级添加display：flex；让子元素根据需求去排列；
二，flex父项常见属性
1，flex布局主与侧轴
在开始学习 flex 布局前我们需要了解主轴侧轴，flex是分为主轴和侧轴两个方向，同样的叫法有 : 行和列、x 轴和y 轴
侧铀，垂直向下
主轴，水平向右
默认主轴方向就是 x 轴方向，水平向右
默认侧轴方向就是 y 轴方向，垂直向下
2, justify-content 主轴上子元素排列方式
| 属性值 | |
|---|---|
| flex-start | 默认值 从头部开始 如果主轴是X轴，则从左到右 |
| fleX-end | 从尾部开始排列 |
| center | 在主轴居中对齐(如果主轴是x轴则 水平居中) |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边 再平分剩余空间 (重要) |
我们在了解这些知识点后，我们就来让小青蛙找到属于他们自己的荷叶吧~
2.1
我们观察图片可以发现我们的目的是让青蛙到右边的荷叶上，那么通过通过红色的主轴我们可以发现我们的青蛙在主轴子元素的默认位置也就是justify-content ：flex-start；那么我们只需要改变主轴子元素到尾部也就是右边
那么我们只需要给左边代码区域添加justify-content ：flex-end；
2.2
和上面一样的原理，这次我们让青蛙到中间也就是让子元素在主轴上居中对齐
那么我们只需要给左边代码区域添加justify-content ：center；
2.3
让青蛙再平分剩余空间
2.4
让青蛙先两边贴边，再平分剩余空间
3, algin-items 侧轴上子元素排列方式
| 属性值 | 解释说明 |
|---|---|
| flex-start | 默认值 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中 (垂直居中) |
| stretch | 拉伸 |
3.1
观察荷叶的位置在侧轴的尾部，青蛙在侧轴的默认位置algin-items：flex-start；
那么我们需要把青蛙设置到尾部位置
也就是设置algin-items：flex-end；
3.2
青蛙的位置在主侧轴默认位置，而荷叶在主轴侧轴的中间，那么我们只需要把青蛙也移动到主侧轴中间
3.3
观察荷叶在侧轴尾部，并且平分空间，那么我们找到代码让青蛙同样实现这个效果
4，flex-direction 设置主轴的方向
flex-direction 属性决定主轴的方向 (即项目的排列方向)
注意: 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴而我们的子元素是跟着主轴来排列的
| 属性值 | 解释说明 |
|---|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
4.1
我们通过观察图片，可以发现主轴方向是默认值从左到右排列，那么我们只需要改变主轴方向为从右到左
4.2
我们通过观察图片，可以发现主轴方向是默认值从左到右排列，那么我们只需要改变主轴方向为从上到下
4.3
我们通过观察图片，确定第一步我们应改变主轴的方向从右到左
再让主轴上的子元素到结尾位置
4.4
我们通过观察图片，确定第一步我们应改变主轴的方向从上到下
再让主轴上的子元素到结尾位置
4.5
看了这么多案例，是不是对小青蛙回荷叶很有感觉了呢
我们改变主轴方向，再让主轴子元素居中，侧轴子元素到尾部
5,flex-wrap 设置子元素是否换行
默认情况下，项目都排在一条线 (又称”轴线”)上flex-wrap 属性定义，flex 布局中默认是不换行的。
| 属性值 | 解释说明 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
当我们给父盒子设置了felx属性，因为flex-wrap的默认属性值是nowrap所以无论一行的宽度是否足够都不会像其他布局一样掉下来，而是缩小宽度挤在一行
6,flex-flow 复合属性
flex-flow: 复合属性，相当于同时设置了 flex-direction 和 flex-wrap
7,align-content 侧轴上子元素排列方式(多行)
设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况(多行)，在单行下是没有效果的。
| 属性值 | 解释说明 |
|---|---|
| flex-start | 在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
三，flex子项常见属性
上面这么多属性都是给父盒子设置的的，那么接下来的属性我们可以对某一个子元素单独设置
1，order
order属性定义项目的排列顺序，数值越小，排列越靠前也可以为负数，默认为0。
注意:和z-index 不一样。
item { order: <number>； }
我们只需要给黄色小青蛙设置一个大于0的order就可以了
2，align-self
align-self 控制子项自己在侧轴上的排列方式
align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 alian-items 属性，如果没有父元素，则等同于 stretch
那么我们只需要让黄色小青蛙单独设置侧轴位置在尾部
3，flex 定义子项剩余空间
这个属性主要用来布局子盒子的一些空间问题，比如我们遇到左右两个盒子固定宽度，中间盒子宽度延用剩下的宽度，以前我们常用浮动，超级复杂，现在这个时候我们用这一属性就变得超级简单 只需要开启flex然后两边定宽，中间盒子flex：1；
得知这个属性后我们就可以解锁各种魔法布局啦
4，flex-basis
CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
当给父元素设置flex再给子元素设置flex-basis：200px；可以定义子元素的宽度
备注： 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级。
5，flex-grow和flex-shrink
5.1 flex-grow
这个属性规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。 主尺寸是项的宽度或高度，这取决于flex-direction值。
剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。
flex-grow 与其他的 flex 属性flex-shrink和flex-basis一起使用，通常使用flex 速记来定义，以确保所有的值都被设置。
flex-grow：0；为他的默认值 当我们父元素盒子的宽度不够时，给子元素设置flex-grow：1；他就能将其填满
5.2 flex-shrink
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。m默认值为flex-shrink：1；
也就是说当父元素宽度不够时，子元素会自动缩减宽度仍然挤在父盒子内
