2024年最全flex弹性布局知识点(2)，面试官凶

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

一、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：子项在侧轴平分剩余空间；

• space-between：子项在侧轴先分布在两头，再平分剩余空间；

• stretch：设置子项元素高度平分元素高度；

代码如下（示例）：