complete flex blog 2 🐦 ✍🏼 👾

Blog/56. 图解Flexbox2 - 深入理解.md

@@ -12,43 +12,43 @@
 
 下图表示可以和 `width` 属性互换
 
-![flex-more-1.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-1.gif)
+![flex-more-1.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-1.gif)
 
 那 `flex-basis` 和 `width` 又有什么区别呢，因为 Flexbox 的容器有两个轴 如下：
 
-![flex-more-2.png](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-2.png)
+![flex-more-2.png](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-2.png)
 
 `flex-basis` 是通过主轴 (main axis) 来影响元素尺寸的
 
 我们保持 `flex-basis` 不变，然后切换主轴方向 如下：
 
-![flex-more-3.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-3.gif)
+![flex-more-3.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-3.gif)
 
 注意，我们必须从手动设置高度切换成手动设置高度。因此通过 `flex-direction` 的不同，`flex-basis` 会交替的影响 `width` 或 `height`
 
 ## 属性 #2 `flex-grow`
 
 首先设置每个元素 `width` 为 120px ，如下：
 
-![flex-more-4.png](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-4.png)
+![flex-more-4.png](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-4.png)
 
 `flex-grow` 的默认值为 0，意味着每个元素不能在容器内增长 (grow) 他们的宽度
 
 如果设置 `flex-grow: 1` 呢，如下图：
 
-![flex-more-5.png](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-5.png)
+![flex-more-5.png](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-5.png)
 
 每个元素在容器内均匀的充满了整个空间，`flex-grow` 的值覆盖了 `width`
 
 那 `flex-grow: 1` 到底意味着什么呢，如果我们改为 `flex-grow: 999` 
 
-![flex-more-6.png](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-6.png)
+![flex-more-6.png](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-6.png)
 
 完全一样，没有变化。那是因为 `flex-grow` 不是个绝对值，而是一个相对值。
 
 起作用的不是一个元素的 `flex-grow` 的值，而是他相对于其他元素值。比如，我们改变三个元素的`flex-grow:` 其他元素不变 
 
-![flex-more-7.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-7.gif)
+![flex-more-7.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-7.gif)
 
 这个其实很容易理解，就是按照百分比来占据空间：
 
@@ -61,7 +61,7 @@
 
 `flex-grow` 的值是按比例来计算的，比如设置每个元素 `flex-grow: 4` ,第三个元素 `flex-grow: 12`, 其实和 1:3 一样的
 
-![flex-more-8.png](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-8.png)
+![flex-more-8.png](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-8.png)
 
 `flex-grow` 和 `flex-basis` 一样是作用于主轴的。除非改变 `flex-direction: column` 否则元素只是改变宽度
 
@@ -73,11 +73,11 @@
 
 下图中每个元素都是 `flex-grow: 1` 他们会充满容器，同时每个元素 `flex-shrink: 1`, 他们是可以收缩的
 
-![flex-more-9.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-9.gif)
+![flex-more-9.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-9.gif)
 
 如果把第三个元素设为 `flex-shrink: 0` 禁止缩小，所以他可以增长宽度适应容器，但是不会下降到 120px 以下
 
-![flex-more-10.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-10.gif)
+![flex-more-10.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-10.gif)
 
 每个元素默认 `flex-shrink: 1`
 
@@ -106,7 +106,7 @@
 
 但是 元素1 将会2x速度增长宽度， 元素2 将会2x速度缩小宽度 如下
 
-![flex-more-11.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-11.gif)
+![flex-more-11.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-11.gif)
 
 ##`flex-grow` 和 `flex-shrink` 是如何工作的
 
@@ -129,7 +129,7 @@
 
 直接用 `flex` 即可表达：
 
-![flex-more-12.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/flex-more-12.gif)
+![flex-more-12.gif](https://raw.githubusercontent.com/ccforward/cc/master/Blog/pic/flex-more-12.gif)
 
 上图很容易看出元素的宽度是如何根据比例进行调整的