本来想找点牛掰的话开个头的，奈何文采有限，思来想去都不知道该怎么说。。。直接上正文吧（叹气）。 Flex(Flexible Box，弹性布局) 基础 1.容器：flex布局元素称之为flex容器，简称容器。 2.项目：Flex容器里的成员统称为Flex项目，简称项目。 3.主轴、侧轴：默认情况下主轴为x轴，侧轴为y轴。（注：项目永远排列在主轴的正方向上） 4.版本 1） -webkit-box-: 老版本，需要关注，移动端内核低，更新速度慢 2）-webkit-flex-/flex: 最终标准 老版本(-webkit-box): 新版本(-webkit-flex- / flex): 1.容器 1.容器的布局方向 (控制主轴是哪一根，侧轴是另外一根): -webkit-box- orient 2.容器的排列方向（控制主轴的方向）：-webkit-box-direction 3.富裕空间的管理 1.容器 1.容器的布局方向 2.容器的排列方向 3.富裕空间的管理 1. 水平轴/x轴：horizontal 2. 垂直轴/y轴：vertical 1.正方向（从左往右）：normal 2.反方向（从右往左）：reverse 控制主轴的选取、主轴的方向：flex-direction 1. 从左往右的x轴：row 2. 从右往左的x轴：row-reverse 3. 从上往下的y轴：column 4. 从下往上的y轴：column-reverse 注意点 A.老版本(-webkit-box)：通过两个属性，四个属性值控制了“主轴的选取”以及“主 轴的方向” 新版本(flex)：通过一个属性，四个属性值控制了“主轴的选取”以及“主轴的方 向” B. 只决定富裕空间的位置，不会分配空间 1.主轴富裕空间：-webkit-box-pack 2.侧轴富裕空间：-webkit-box-algin 1.1.主轴是x轴 C.使用此元素：容器必须是block;块元素才能运用此样式，否则无效 1.1.1.富裕空间在右边：start 1.1.2. 富裕空间在左边：end 1.1.3. 富裕空间在两边：center 1.1.4. 富裕空间在项目之间：justify 1.2.主轴是y轴 1.2.1.富裕空间在下边：start 1.2.2. 富裕空间在上边：end 1.2.3.富裕空间在两边：center 1.2.4.富裕空间在项目之间：justify 2.1.侧轴是x轴 2.2.侧轴是y轴 2.1.1.富裕空间在右边：start 2.1.2. 富裕空间在左边：end 2.1.3. 富裕空间在两边：center 2.2.1.富裕空间在下边：start 2.2.2. 富裕空间在上边：end 2.2.3.富裕空间在两边：center 1.主轴富裕空间：justify-content 2. 侧轴富裕空间：align-items 1.1.在主轴的正方向：flex-start 1.2. 在主轴的反方向：flex-end 1.3. 在两边（所有项目集中于容器x轴中间）：center 1.4. 在项目之间：space-between 1.5. 在项目两边（每一个项目的两边都有富裕空间）：space-around 2.1.在侧轴的正方向：flex-start 2.2. 在侧轴的反方向：flex-end 2.3. 在两边（所有项目集中于容器y轴中间）：center 2.4. 基线对齐：baseline 2.5.等高布局：stretch 3. 弹性空间分配：flex-grow 3.1. 将主轴上的富裕空间按比例分配到项目上,默认值:0 不可继承 3. 弹性空间分配：-webkit-box-flex 3.1. 将主轴上的富裕空间按比例分配到项目上,默认值:0 不可继承 4.新增 flex-wrap ：当容器排列多行/多列时，管理项目在侧轴上的堆砌，以及侧轴的方 向。 align-content ：多行多列时，富裕空间的管理（将所有行、所有列当做一个总 体），只有在flex-warp为warp或者warp-reverse时，改该属性才会生效。 flex-flow ：为 flex-direction 和 flex-warp 的简写；控制主轴和侧轴的位 置以及方向。 1.容器 2.项目 1. 项目排序：order；越大越往后 2. align-self : 单个项目富裕空间管理。 3. flex-shrink ：收缩因子，按比例收缩，只有当flex-warp为nowarp时，才会生效。 D. 项目收缩时，最小不会隐藏项目中的内容 当容器中有项目因为内容无法满足时，先 (总容量-特殊项目)，然后将剩下的容量，进行 比列分配。 E.Fire Fox 当中，当-webkit-box-orient:horizontal 时 end 与 start 的顺序 相反 F.-webkit-box-flex:当设定有 非0 值时，随着容器的变小，项目可能会消失 *** 其实 -webkit-box 的话也可以算是flex布局的前世了，flex也是由 -webkit-box 一步一步的进化，然后抛弃了自身而来的。假期无聊，就认真整理了一下这两个东西，感觉还不错。 *** 整理不易，给个三连吧~ 亲~ *** svg好像出问题了，附上图片
1573
非常没帮助
没帮助
一般
有帮助
非常有帮助
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
