CSS3弹性盒布局总结

|

|

|

| — | — | — | — | — | — |

| Basic support (single-line flexbox) | 29.0 21.0 -webkit- | 11.0 | 22.0 18.0 -moz- | 6.1 -webkit- | 12.1 -webkit- |

| Multi-line flexbox | 29.0 21.0 -webkit- | 11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |

三、CSS3 弹性盒子内容

=============

弹性盒子由弹性容器 (Flex container) 和弹性子元素 (Flex item) 组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex 将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示，从左到右:

四、CSS3 弹性盒子常用属性

===============

| 属性 | 描述 |

| — | — |

| flex-direction | 指定弹性容器中子元素排列方式 |

| flex-wrap | 设置弹性盒子的子元素超出父容器时是否换行 |

| flex-flow | flex-direction 和 flex-wrap 的简写 |

| align-items | 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式 |

| align-content | 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐 |

| justify-content | 设置弹性盒子元素在主轴（横轴）方向上的对齐方式 |

1. flex-direction 属性

决定项目的方向。

** 注意：** 如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

.flex-container {flex-direction: row | row-reverse | column | column-reverse;}

属性值

| 值 | 描述 |

| — | — |

| row | 默认值。元素将水平显示，正如一个行一样。|

| row-reverse | 与 row 相同，但是以相反的顺序。|

| column | 元素将垂直显示，正如一个列一样。|

| column-reverse | 与 column 相同，但是以相反的顺序。|

2. flex-wrap 属性

flex-wrap 属性规定 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

| 值 | 描述 |

| — | — |

| nowrap | 默认值。规定元素不拆行或不拆列。|

| wrap | 规定元素在必要的时候拆行或拆列。|

| wrap-reverse | 规定元素在必要的时候拆行或拆列，但是以相反的顺序。|

.flex-container {flex-wrap: nowrap | wrap | wrap-reverse;}

可以取三个值：

（1）nowrap (默认)：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

3. flex-flow 属性

flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

.flex-container {flex-flow:}

4. align-items 属性

align-items 属性定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。

| 值 | 描述 |

| — | — |

| stretch | 默认值。项目被拉伸以适应容器。|

| center | 项目位于容器的中心。|

| flex-start | 项目位于容器的开头。|

| flex-end | 项目位于容器的结尾。|

| baseline | 项目位于容器的基线上。|

5. justify-content 属性

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

| 值 | 描述 |

| — | — |

| flex-start | 默认值。项目位于容器的开头。|

| flex-end | 项目位于容器的结尾。|

| center | 项目位于容器的中心。|

| space-between | 项目位于各行之间留有空白的容器内。|

| space-around | 项目位于各行之前、之间、之后都留有空白的容器内。|

五、弹性子元素属性

=========

| 属性 | 描述 |

| — | — |

| order | 设置弹性盒子的子元素排列顺序。|

| flex-grow | 设置或检索弹性盒子元素的扩展比率。|

| flex-shrink | 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。|

| flex-basis | 用于设置或检索弹性盒伸缩基准值。|

| flex | 设置弹性盒子的子元素如何分配空间。|

| align-self | 在弹性子元素上使用。覆盖容器的 align-items 属性。|

1. order 属性

.flex-container .flex-item {order: ;}

：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为 0。

2. flex-grow 属性

.flex-container .flex-item {flex-grow: ;}

：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

3. flex-shrink 属性

.flex-container .flex-item {flex-shrink: ;}

自我介绍一下，小编 13 年上海交大毕业，曾经在小公司待过，也去过华为、OPPO 等大厂，18 年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024 年 Web 前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合 3 年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了 95% 以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后：

总结来说，面试成功 = 基础知识 + 项目经验 + 表达技巧 + 运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

点击这里领取 Web 前端开发经典面试题

539300)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后：

总结来说，面试成功 = 基础知识 + 项目经验 + 表达技巧 + 运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

点击这里领取 Web 前端开发经典面试题