2024年CSS学习笔记（flex 伸缩布局 ），前端开发开发视频

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2、定义主轴方向

• 使用 flex-direction 属性来定义伸缩方向，主要用来创建主轴，从而定义伸缩项目在伸缩容器内的放置方向。

语法格式：

flex-direction:row | row-reverse | column | column-reverse

**row：默认值，水平排列

row-reverse：水平排列，与 row 方向相反

column：垂直排列，从上到下排列；

columns-reverse：垂直排列，从下到上排列**

3、定义水平对齐

• justify-content 调整主轴对齐，该属性适用于伸缩容器。

语法格式：

justify-content:flex-statr | flex-end | center | space-between | space-around

4、定义垂直对齐

align-items 调整侧轴对齐（垂直对齐）,子盒子如何在父盒子里面垂直对齐（单行）

align-items:flex-start | flex-end | center | stretch | baseline

5、控制是否换行

flex-wrap控制是否换行，当子盒子内容宽度多于父盒子的时候如何处理。

flex-wrap: nowrap | wrap | wrap-reverse

Tips：flex-flow是flex-direction、flex-wrap的简写形式，适用于伸缩容器。该属性可以同时定义伸缩容器的主轴和侧轴。其默认值是 row nowrap。

flex-flow: flex-direction flex-wrap;

6、定义伸缩轴对齐

align-content 堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐。

align-content 是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

性能优化

1.webpack打包文件体积过大？（最终打包为一个js文件）

2.如何优化webpack构建的性能

3.移动端的性能优化

4.Vue的SPA 如何优化加载速度

5.移动端300ms延迟

6.页面的重构

所有的知识点都有详细的解答，我整理成了280页PDF《前端校招面试真题精编解析》。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】