2024年Web前端最全flex弹性布局知识点，2024年最新面试靠背

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

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

---

前言

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

好好学习，记住这些属性，以后用处会很大的。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、flex弹性布局

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

布局原理：

flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。总结：flex布局原理就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

注意：

1、当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

2、伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局（别称）

定义：

采用flex布局的元素，称为flex容器，简称“容器”。它的所有子元素自动成为容器成员，称为flex项目，简称“项目”。

举例：

div就是flex父容器，span就是子容器flex项目，子容器可以横向排列也可以纵向排列。

二、flex布局父项属性

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

父项常见属性

1. List itemflex-direction：设置主轴的方向；

2. justify-content：设置主轴上的子元素排列方式；

3. flex-wrap：设置子元素是否换行；

4. align-content：设置侧轴上的子元素的排列方式（多行）；

5. align-items：设置侧轴上的子元素排列方式（单行）；

6. flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap。

主轴与侧轴

1、默认主轴方向就是X轴方向，水平向右

2、默认侧轴方向就是Y轴方向，垂直向下

1.flex-direction

---

属性值以及说明：

row：从左到右；（默认值）

row-reverse从右到左；（反方向）

column：从上到下；

column：从下到上；

代码如下（示例）：

1

2

3

默认的效果图：

代码如下（示例）：

div {

display: flex;

width: 800px;

height: 300px;

background-color: pink;

/* Y轴为主轴 */

flex-direction: column;

}

div span {

width: 150px;

height: 100px;

background-color: powderblue;

}

Y轴的效果图：

代码如下（示例）：

div {

display: flex;

width: 800px;

height: 300px;

background-color: pink;

flex-direction: row-reverse;

}

div span {

width: 150px;

height: 100px;

background-color: powderblue;

}

看数字，注意盒子顺序发生了变化，效果图如下：

2.justify-content

---

justify-content属性定义了项目在主轴上的对齐方式。

1. flex-start：默认值从头部开始，如果主轴是x轴，则从左往右；

2. flex-end：从尾部开始排列；

3. center：在主轴居中对齐（如果主轴是x轴则水平居中）

4. space-around：平分剩余空间；

5. space-between：先两边贴边，再平分剩余空间（重要）

代码如下（示例）：

1

2

3

4

先两边贴边，再平分剩余空间的效果图如下：

代码如下（示例）：

div {

display: flex;

width: 800px;

height: 300px;

background-color: pink;

/* 平分剩余空间 */

justify-content: space-around;

}

div span {

width: 150px;

height: 100px;

background-color: powderblue;

}

平分剩余空间的效果图：

代码如下（示例）：

div {

display: flex;

width: 800px;

height: 300px;

background-color: pink;

/* 在主轴居中对齐 */

justify-content: center;

}

div span {

width: 150px;

height: 100px;

background-color: powderblue;

}

在主轴居中对齐的效果图：

代码如下（示例）：

div {

display: flex;

width: 800px;

height: 300px;

background-color: pink;

/* 从尾部开始排列 */

justify-content: center;

}

div span {

width: 150px;

height: 100px;

background-color: powderblue;

}

注意看数字，从尾部开始排列的效果图：

3.flex-wrap

---

默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。

• nowrap:默认值，不换行；

• wrap：换行。

代码如下（示例）：

1

2

3

4

5

在不换行的情况下，盒子的宽度会自动缩小以便于一行可以放下所有盒子，默认不换行的效果图：

div {

display: flex;

width: 600px;

height: 400px;

background-color: pink;

flex-wrap: wrap;

}

div span {

width: 150px;

height: 100px;

background-color: powderblue;

margin: 10px;

}

换行的效果图：

4.align-content

---

该属性是控制子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。

• flex-start：默认值在侧轴的头部开始排列；

• flex-end：在侧轴的尾部开始排列；

• center：在侧轴中间显示；

• space-around：子项在侧轴平分剩余空间；

HTTP

• HTTP 报文结构是怎样的？

• HTTP有哪些请求方法？

• GET 和 POST 有什么区别？

• 如何理解 URI？

• 如何理解 HTTP 状态码？

• 简要概括一下 HTTP 的特点？HTTP 有哪些缺点？

• 对 Accept 系列字段了解多少？

• 对于定长和不定长的数据，HTTP 是怎么传输的？

• HTTP 如何处理大文件的传输？

• HTTP 中如何处理表单数据的提交？

• HTTP1.1 如何解决 HTTP 的队头阻塞问题？

• 对 Cookie 了解多少？

• 如何理解 HTTP 代理？

• 如何理解 HTTP 缓存及缓存代理？

• 为什么产生代理缓存？

• 源服务器的缓存控制

• 客户端的缓存控制

• 什么是跨域？浏览器如何拦截响应？如何解决？

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