摘要：主轴方向的多余空间的出现是因为容器宽度元素项宽度之和。对空间分配的思考是如何计算项的宽度的所有项先按照原始宽度在容器中排列。开发时布局的一般流程根据设计，确定需要多少行来显示所有内容，然后确定每一行有哪些项。对每一项，定义其样式。
阅读本文之前最好对flex布局有基本了解，可以通过“参考资料”中列举的资源来学习。
flex布局规范的设计目标
一维布局模型(one-dimensional layout model)，元素项沿着水平或垂直方向来排列，就像一条沿着一个方向的“流”。
与之对应的，CSS Grid Layout是一个二维布局模型。两者互为补充。
空间分配(space distribution)，（假设主轴是水平方向）元素项的最终宽度受到当前行剩余空间（或不足空间）的影响，就像是有弹性一样会膨胀和收缩。
强大的对齐支持(align and justify)，align和justify本质上来说，是定义多余(空白)的空间要放在哪里。align(align-items, align-content)定义了交叉轴方向上的多余(空白)空间分布，而justify(justify-content)定义了主轴方向的多余(空白)空间要分布。
为了方便讨论，我们假设主轴是水平方向，当主轴是垂直方向的时候是同理的。对align和justify的思考 主轴方向的多余空间
justify-content定义的是主轴方向的多余空间要如何分布。
主轴方向的多余空间的出现是因为容器宽度 > 元素项宽度之和。如图：
这个可交互实例来自MDN。
等一下，不是说 【主轴方向的多余空间会分配给元素项->使元素项膨胀->元素项占满主轴的空间】 的吗？为什么这里又有多余的空间来给justify-content分发呢？这是因为元素项不一定会膨胀(flex-frow的默认值为0，默认不膨胀)，即使膨胀，膨胀后的宽度也会受到max-width的约束。因此有很多时候，主轴在元素项膨胀以后还是有多余空间的。
一个行内，交叉轴方向的多余空间align-items定义的是一个行内，交叉轴方向的多余空间要如何分布。
一个行内，交叉轴方向的多余空间的出现是因为行的高度大于项的高度。由于各个项的高度不一致，比较高的项会将整行的高度撑开，对于那些比较矮的项，在它的垂直方向上就会出现多余空间。如下图：
这个可交互实例来自MDN。行与行之间，交叉轴方向的多余空间关于高度撑开的讨论，见用css控制元素高度：自底向上和自顶向下的方法。
align-content定义的是行与行之间，交叉轴方向的多余空间要如何分布。
在这里说的“行”，指的是一个flex容器内，由于flex-wrap: wrap造成的换行（下面会讨论到换行），而不是指【第一个flex容器是一行，第二个flex容器是第二行】！
行与行之间，交叉轴方向的多余空间的出现是因为容器高度 > 容器内各行的高度之和。
前面说过，一个行的高度是由这一行中最高的项撑开的。一个flex容器，默认的时候(height:auto)，其高度也是被其内部的所有行的高度撑开的，在这个时候容器的高度恰好等于所有行的高度之和，不存在“行与行之间，交叉轴方向的多余空间”。
但是如果容器本身定义了height: 10000px呢？它的高度就固定了，不会受到其内部的行的影响。这时候，如果所有行的高度之和不足以填满容器高度，交叉轴方向就会出现多余空间。如图：
这个可交互实例来自MDN。对空间分配的思考
flex是如何计算项的宽度的？
所有项先按照原始宽度在容器中排列。
原始宽度由flex-basis决定，由于flex-basis默认值是auto（意思是取content-box的宽度作为flex-basis），因此一般width就是原始宽度。如果没有定义width，则width由项的子元素撑开。
如果容器有多余的宽度，则将这些多余宽度分配给每个项（分配比例由flex-grow控制），使得项的宽度增加，得到每个项的flex宽度。最终宽度基于flex宽度，但还会受到min-width、max-width的限制。
如果所有项的原始宽度已经超过了容器元素的宽度，那么会先检查flex-wrap是否允许换行，如果允许换行，则换行以后再计算flex宽度；如果不允许换行，则将超出的宽度分配给每个项（分配比例由flex-shrink控制），使得项的宽度减小，得到每个子元素的flex宽度。最终宽度基于flex宽度，但还会受到min-width、max-width的限制。
总结来说就是，width决定原始宽度，flex-grow/flex-shrink决定分配比例，min-width、max-width限制最终宽度。
flex宽度计算的例子（可在浏览器中打开）：
Document
计算过程：
content1原始宽度100px，content2原始宽度0px。剩余宽度为1000px-100px=900px。
由于content的flex-grow都相等，因此剩余宽度被平均分配，每个content分到450px。
content1最终宽度100px+450px=550px，content2最终宽度0px+450px=450px。
根据UI设计，确定需要多少“行”来显示所有内容，然后确定每一“行”有哪些“项”。一个“项”本身也可以成为容器，包含一行或多行。
这里的“行”指的就是一个flex-direction:row的容器了（与之前的讨论不同）。它可以设置flex-wrap:wrap，使得一个“行”容器在宽度不够容纳子元素的时候，在容器内部产生换行。
对每一“行”，定义其样式。行是一个flex容器（display:flex）。并使用justify-content、align-items来定义元素在容器中的分布方式。通过margin-top来定义行之间的纵向距离。
对每一“项”，定义其样式。使用margin、padding来对元素位置进行微调。合理使用flex-grow、flex-shrink、width、min-width、max-width来调整元素的宽度。通过margin-left来定义元素之间的横向距离。如果这“项”本身也是一个容器（包含一行或多行），返回第2步。
参考资料图解CSS3 Flexbox属性
Flex 布局教程 - 阮一峰
CSS Flexible Box Layout - MDN
Basic concepts of flexbox - MDN
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113821.html
摘要：经典的粘连布局参考文章链接在文章末尾，简单的语言总结如下经典的粘连布局就是。当元素比较短的时候比如小于屏幕的高度，我们期望这个元素能够粘连在屏幕的底部。 经典的粘连footer布局 参考文章链接在文章末尾，简单的语言总结如下： 经典的粘连footer布局就是。我们有一块内容。当的高度足够长的时候，紧跟在后面的元素会跟在元素的后面。当元素比较短的时候（比如小于屏幕的高度），我们期望这个元...
摘要：任务四一个最常见的移动端页面完成的事情完成简单布局，然后填充界面与效果图对比优化完成验收要求扩展性顶栏固定进行样式兼容性研究完成任务四深度思考跟随深度思考师兄建议进行修改输入栏左侧换用输入限制电话位，密码位根据结构的语义化修改尝试下再加一 任务四、 一个最常见的移动端页面 完成的事情 完成简单布局，然后填充界面 与效果图对比优化 完成验收要求：header扩展性 & 顶栏固定 进行p...
阅读 3027·2021-11-25 09:43
阅读 1005·2021-11-24 10:22
阅读 1328·2021-09-22 15:26
阅读 656·2019-08-30 15:44
阅读 2425·2019-08-29 16:33
阅读 3581·2019-08-26 18:42
阅读 851·2019-08-23 18:07
阅读 1806·2019-08-23 17:55
