《重学前端》学习笔记Day121

CSS Flex排版

Flex的设计

Flex在英文中是可伸缩的意思，有些翻译会翻译为弹性，不太准确，但是中文没有更好的词。
Flex的核心是flex和flex的属性，他们配合使用。具有display: flex;我们称之为容器，其子元素或者盒称之为项。
flex项如果有flex属性，会根据flex方向决宽高属性，形成“填满剩余尺寸”的特性。这一种典型的“根据外部容器决定内部尺寸”的思路。也是最常见windows和Mac窗口系统设计思路。

Flex的原理

如何实现一个Flex布局：
首先，Flex布局支持横向和纵向，这样我们需要做一个抽象，flex延伸的方向称为“主轴”，与它垂直方向的称为“交叉轴”。这样Flex项中的with和height就会称为交叉轴尺寸或是主轴尺寸。
而Flex又支持反向布局，我们又需要抽象出交叉轴起点、交叉轴终点、主轴起点、主轴终点，它们可能是Top、Bottom、Left、Right
有一种特殊情况，flex没有被指定主轴尺寸，这个时候，实际上Flex完全没有用了，所有的Flex尺寸都可以被当作0处理，flex容器主轴的尺寸等于其他所有flex项主轴尺寸的总和。
flex排版
第一步是把flex项分行，有flex属性可以暂定flex主轴尺寸为0，所以，它可以一定放进当前行。
接下来把flex逐个放入行，不允许换行的话，就可以“无脑”的把flex项放进同一行。允许换行的话，就先设定主轴剩余空间为flex容器主轴的尺寸，每放入一个就把主轴的剩余空间减掉它的主轴尺寸，直到某个项放不进去为止，换下一行，重复前面的动作。
分行过程中，我们会顺便对每一行计算两个属性：交叉轴尺寸和主轴剩余空间，交叉轴尺寸是本行所有交叉轴的最大值。
第二步计算每个flex项主轴尺寸和位置。
如果flex容器是不允许换行的，并且最后主轴尺寸超出了flex容器，就要做等比缩放。
如果flex容器有多行，那么就根据前面的分行算法，必然有主轴剩余空间，这时候，我们要找出本行所有的带Flex属性的flex项，把剩余的空间按Flex比例分给他们即可。
做好之后，我们就可以根据主轴排布方向，确定每个flex项的位置坐标了。
如果本行没有带有flex属性的项，justify-content属性就生效了，它的值会影响剩余空白如何分配，作为实现者，只要在计算项坐标的时候，加上一个数值即可。
第三步我们来计算flex项的交叉轴尺寸和位置。
交叉轴的计算首先是根据align-content计算每一行的位置，这部分跟justify-content 非常类似。
再根据align-items和flex项的align-self来决定每个元素在行内的位置。
计算完主轴和交叉轴，每个项的坐标和尺寸就确定了，我们就完成了整个的Flex布局。

Flex的应用

此文章为7月Day24学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪