这里的 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 的简写。
flex 是 flexible box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。能够高效方便的控制元素的对齐、排列，自动计算布局内元素的尺寸，无论元素的尺寸是固定的还是动态的，控制元素在页面的布局方向。
弹性盒子由弹性容器(flex container)和弹性子元素(flex item)组成。
弹性容器设置属性 display:flex
一、容器属性
flex-flow 复合属性，是 flex-direction 和 flex-wrap 的简写形式。 默认值：flex-flow: row nowrap
⑴ flex-direction 子元素排列方向
flex-direction: row从左到右
flex-direction: row-reverse从右到左
flex-direction: column从上到下
flex-direction: column-reverse从下到上
⑵ flex-wrap 子元素换行方式
flex-wrap: nowrap不换行
flex-wrap:wrap换行
flex-wrap: wrap-reverse反转 wrap 排列，行颠倒
2 justify-content 子元素沿主轴对齐方式
justify-content: flex-start
justify-content: space-between
3 align-items 子元素在交叉轴上对齐方式
align-items: center垂直方向居中
align-items:flex-start垂直方向的顶部/交叉轴的起点对齐
align-items: flex-end垂直方向的底部/交叉轴的终点对齐
align-items: baseline项目的第一行的文字的基线对齐
align-items: stretch默认值，如果项目未设置高度或设为auto，将占满整个容器的高度
二、子元素属性（写在子元素下）
align-self 用于设置弹性子元素自身在侧轴（纵轴）方向上的对齐方式。允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
align-items: center
align-items: flex-start
align-items: flex-end
align-items: baseline
align-items: stretch
order 定义子元素的排列顺序。数值越小，排列越靠前，默认为order: 0，可以为负值。
flex-grow 定义子元素的扩展比率，主要作用：分配剩余空间。负值无效。
flex-grow: 0默认值，即如果存在剩余空间，也不放大。
flex-grow: 1如果存在剩余空间，放大 ，等分剩余空间。
flex-shrink 定义子元素的收缩比率，值越大，按比例缩的就越小。
flex-shrink: 1默认值，即如果空间不足，缩小。
flex-shrink: 0不缩小。
flex-basis 定义元素的默认基准值。
设置了flex-basis，width就不起作用；同时存在的时候，优先使用flex-basis。
如果容器的宽度太小，子元素排列不下，设置的flex-basis的宽度会自动缩小，直到占满容器。
链接：https://juejin.cn/post/7038088241437736991
咦,感觉这个层次示意图,比较值钱! 单独放一下.
触发怪异模式的条件
如果想设置滚动条样式怎么办?
三列布局
第一种 绝对定位
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属性了.
好课外思考就到这里, 继续看视频
