这里的 wrap 指容器，item 我们称作项目。我们还需要知道 flex 属性是 flex-grow , flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。接下来我们逐一介绍这三个属性:
flex grow 属性设置 flex 容器中的 ** 可用空间 ** 应分配给该项的大小。如果所有同级项目都具有相同的值，则所有项目将获得相同的可用空间份额，否则将根据定义的不同比率进行分配。
从左到右三个红色方块的宽度依次为 48.5 + 97 + 48.5 = 194，加上 6 个边框刚好 200。三个 item 按照 1:2:1 的比例占满了容器。上面我们并没有给 item 添加宽度，如果我们给它们加上 width 会怎么计算呢？
我们通过控制台查看三个 item 的宽度从左到右依次是 61 + 72 + 61 = 194，加上 6 个边框刚好 200。但是三个元素并不是按照 1:2:1 的比例分配的。这是为什么呢？仔细看定义后知道，我们给 wrap 设置了 width 为 200px，三个 item 设置了 50px，所以剩余的是 50px。剩余的 50px 按照 1:2:1 的比例又分别分配给了三个 width 为 50px 的 item。 注意这个比例是剩余空间分配的分配比例，而不是分配后元素自身的比例。
设置项目的收缩比例，如果空间不足，该项目将缩小。
默认值为 1。
设置或检索弹性盒伸缩基准值。如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间。
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写。
很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。
学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊- 点击此处 ，
同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。
————————————————
1.什么是flex
flex 是 Flexible Box 的缩写,意为 弹性布局
flex布局中把一个元素作为容器，容器中的子元素称为项目
可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。
2.flex布局的方向
flex布局项目的排列方向可以有两个维度，一水平，二垂直
项目排列方向称为主轴，与主轴垂直的方向叫交叉轴
在每个轴上有两个方向，从左至右，从右到左；从上到下，从下到上。
2.1 flex水平布局
在水平维度，默认方向是从左至右
可以通过 flex-direction：row-reverse设置为从右到左排列
效果图：
1).默认方向,从左至右
2).反方向
2.2 垂直布局
效果图：
1).默认方向，从上到下
2).反方向
3. 容器内项目换行
通过flex-wrap属性，设置项目在容器内是否可以换行，默认不允许换行。
不换行的称为单行容器，换行的称为多行容器
也可以通过flex-flow属性同时设置容器主轴方向和是否换行（推荐使用）
效果图：
1).默认不允许换行，项目被压缩
2).允许换行，当剩余宽度不足容纳一个项目块时，就换行
相关知识：
css如何实现边框长度控制功能
详细介绍css中的数学表达式calc()
关于书籍：需要学习资料的小伙伴们可以加群， 点击此处
咦,感觉这个层次示意图,比较值钱! 单独放一下.
触发怪异模式的条件
如果想设置滚动条样式怎么办?
三列布局
第一种 绝对定位
html
css
利用 vw 和 calc()?
float方式,
要注意html的顺序
html
scss
参考 三列布局实现4种方法
双侧翼,还真是学习了.
这样能够保证先加载中间的主要内容
html
scss
不用float 用display : inline-block行不行?
这才发现 float 和 inline-block 有个挺大的区别
float 时, left 通过 margin-left 向左移动时, right 会被 mid卡主.
inline-block 时, left通过margin-left 向左移动时, right会跟着left 一起移动.
双侧翼很巧妙!
css每个单句都不怎么难, 但复合使用不太好掌握.
圣杯模式
html
scss
这个就更巧妙了,我真实佩服的五体投地.
首先, width 和 margin 的百分比都是 针对父级的宽度, 这个宽度是 content-width
不包括padding部分.
所以根据padding 预留出左右的空间.
根据float 的特性, 左右会折行到下一行,
通过margin-left 可以让float元素 之间重叠, 让他们回到同一行.
但重要的是, left 的移动,right不会跟着移动,这和inline-block 不同.
最后用relative最后再调一次位置.
实在是精妙.
css3 关于position 感觉非常坑人
关于 百分比的基准值,这里有写.
用flex
html
scss
确实很方便, 问题来了, 如果我想让mid 先加载怎么办?
利用order
html
scss
设置在子元素,伸缩项目上.
多余的部分会进行拉伸填充,
每个子元素的默认是为0, 默认是不会拉伸填充,不变形.
如果设置,则按照比例,分割空间分配.
也就是会经过变形不超出父级.
默认值为 1, 按照该比例,切割子元素,
如果我们想让他们不变形且不换行,
可以把子元素的shrink 值都设置为0
这就是视频和文字的差异了,
因为用文字表达要准确,所以只能说的不是人话,
实际上核心逻辑非常简单.
刚开始,我不明白这个属性有什么用处,
后来发现三列布局时,通过html顺序和 order配合可以调整加载顺序.
默认值为 0
如果我们想设置子元素的主轴方向的属性,
可以用 grow, shrink, base ,order, 可以调整主轴的大小和位置
如果想谁知子元素的侧轴方向的属性,
可以用aline-item,
父元素上的 flex-direction flex-wrap justify-content aline-item aline-content
这几个属性,都是用来进行布局的.
非常的,,嗯强大.
我们讲主轴设为 x轴, 设定多行的情况,
讨论一下 aline-item 和 aline-content的效果区别.
之前我只是笼统的知道 aline-item 作用在侧轴只有一行的情况.
aline-content 作用在侧轴多行的情况.
而实际上 aline-item 对 侧轴多行的情况也是有效果的,只是不一样.
html
当值为strech时, 两个效果是一样的.
注意strech 如果想要有效果, 就必须让heigth(侧轴宽度) 不是固定宽度,否则失效.
除了这三个之外, aline-content 还有两个属性,
与justify-content 非常类似,
如果父级 relative 子级当中有 absolute的元素,
则该子元素不受到 flex布局的影响.
flex布局时会排除该元素进行布局
至此,我觉得flex进行布局,那是真的强.
主轴和侧轴的各自控制属性基本就全了.
侧轴唯一比主轴差的属性,应该就是 shink 和 order属性了.
好课外思考就到这里, 继续看视频
