2024年最全【前端三件套——CSSflex布局】简单知识整理，2024大厂Web前端社招面试题

性能优化

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

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

3.移动端的性能优化

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

5.移动端300ms延迟

6.页面的重构

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

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

决定主轴方向,默认横向row

• row-reverse：水平，起点在右端

• column 主轴垂直,起点上沿

• column-reverse: 垂直，起点下沿

2.2 flex-wrap

默认排在轴线上

该属性设置,，若一条轴线排不下，如何换行

• nowrap 不换行（默认）

• wrap 换行,第一行在上方

• wrap-reverse 换行,第一行在下方

2.3 flex-flow

是上述俩属性的简写形式

默认值为row nowrap

2.4 justify-content

定义项目在主轴的对齐方式

• 默认flex-start 左对齐

• flex-end 右对齐

• center 居中

• space-between 两端对齐，项目之间间隔相等

• space-around 每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍

• space-evenly 每个间隙距离相等(兼容处理:用 space-between配合before+after使用)

2.5 align-items

定义项目找交叉轴上如何对齐

• flex-start 交叉轴起点对齐

• flex-end 交叉轴中点对齐

• baseline 项目第一行文字的基线对齐

• stretch (默认值) 若项目未设置高度或设为auto，将占据整个容器高度

2.6 align-content

定义多根轴线的对齐方式(盒子有多行)

若项目只有一根轴线，则该属性不起作用

• flex-start 与交叉轴的起点对齐

• flex-end 与交叉轴的终点对齐

• center 与交叉轴中点对齐

• space-between 两端对齐,间隔平均分布

• stretch (默认值)轴线暂满整个交叉轴

3. flex属性

---

3.1 order

定义项目的排列顺序,数值约小,排列越靠前,默认为0

.item{

    order: int;

}

可以赋负值,强制排在前面

3.2 flex-grow

定义项目放大比例，即有剩余空间情况下，项目合并剩余空间

注意： 默认值为0，即即使有剩余空间，项目也不放大

如果有多个项目定义了该属性，按大小，等比例给予，如某一项目flex-grow为1，另一为二，则剩余空间按1:2赋予

.item{

    flex-grow: number;

}

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总