【CSS】精通Flex布局（全）

1. 搭建HTML结构flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。采用Flex布局的元素，称为Flex容器(flex container)，简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。总结flex布局原理：就是通过给父盒子添加flex属性，来

我是哈哈hh

2444人浏览 · 2025-04-27 08:00:00

我是哈哈hh · 2025-04-27 08:00:00 发布

3.3 justify-content 设置主轴上的子元素排列方式

3.4 flex-wrap设置子元素是否换行

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

3.6 align-content 设置侧轴上的子元素的排列方式(多行)

3.6 align-content 和 align-items 区别

4. flex布局子项常见属性

4.1 flex属性

4.2 align-self 控制子项自己在侧轴上的排列方式

总结不易！本章节对我有很大的收获，希望对你也是！！！！

1. flex布局体验

1.1 传统布局与 flex布局

传统布局：兼容性好、布局繁琐、局限性，不能再移动端很好的布局
flex弹性布局：操作方便，布局极为简单，移动端应用很广泛， PC端浏览器支持情况较差，IE11或更低版本，不支持或仅部分支持

1.2 初体验

1. 搭建HTML结构

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 可以让span具有大小 变成行内块元素 */
      display: flex;
      width: 80%;
      height: 300px;
      background-color: pink;
      /* 将一行的行内块元素都按等距进行摆放  能自适应页面大小*/
      justify-content: space-around;
    }

    div span {
      width: 150px;
      height: 100px;
      background-color: skyblue;
      margin-right: 5px;
    }
  </style>
</head>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

</html>

2. flex布局原理

2.1 布局原理

flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

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

采用Flex布局的元素，称为Flex容器(flex container)，简称“容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。

体验中div就是flex父容器
体验中span就是子容器flex项目
子容器可以横向排列也可以纵向排列

总结flex布局原理：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

3. flex布局父项常见属性

3.1 常见父项属性

flex-direction: 设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content: 设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
flex-flow：复合属性，相当于同时设置了flex-direction 和 flex-wrap

1. 主轴与侧轴

再flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

默认主轴方向就是x轴方向，水平向右
默认侧轴方向就是y轴方向，水平向下

3.2 属性值

flex-direction属性决定主轴的方向（即项目的排列方向）

注意：主轴和侧轴是会发生变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

属性值	说明
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 给父级添加flex属性 默认是沿着x轴 row*/
      display: flex;
      width: 800px;
      height: 300px;
      background-color: pink;
      /* 默认是沿着x轴 row 那么y轴就是侧轴喽 */
      /* 我们元素是跟着主轴排列的 */
      /* flex-direction: row; */

      /* 横向 翻转 */
      /* flex-direction: row-reverse; */

      /* 我们可以把主轴设置为y轴 那么x轴就形成了侧轴 */
      flex-direction: column;
    }

    div span {
      width: 150px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

</html>

3.3 justify-content 设置主轴上的子元素排列方式

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

注意：使用这个属性之前一定要确定好主轴是哪个

属性值	说明
flex-start	默认值从头部开始如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	再主轴居中对齐（如果主轴是x轴水平居中）
space-around	平分剩余的空间
space-between	先两边贴边再平分剩余空间（重要）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 给父级添加flex属性 默认是沿着x轴 row*/
      display: flex;
      width: 800px;
      height: 300px;
      background-color: pink;
      /* 默认的主轴是x轴 row */
      flex-direction: row;
      /* justify-content: 是设置主轴上子元素的排列方式; */
      /* justify-content: flex-start; */
      /* justify-content: flex-end; */

      /* 让我们子元素居中对齐 */
      /* justify-content: center; */

      /* 平分剩余空间 */
      /* justify-content: space-around; */

      /* 先两边贴边 再平分剩余空间 */
      justify-content: space-between;
    }

    div span {
      width: 150px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

</html>

当我把主轴改为y轴时， flex布局仍然时同样的效果！

2. 普通布局中当4个span盒子宽度大于div盒子宽度的时候其中span盒子就会掉下来！

再flex布局中就不会存在这种情况：原本span宽度是200的却被修改到了150 然后刚好能够在这一行内沾满！

3.4 flex-wrap设置子元素是否换行

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

属性值	说明
nowrap	默认值不换行
wrap	换行

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

该属性是控制子项在侧轴(默认是y轴)上的排列方式在子项为单项的时候使用

属性值	说明
flex-start	默认值从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸

要求：想让三个盒子同时水平居中并且垂直居中！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 给父级添加flex属性 默认是沿着x轴 row*/
      display: flex;
      width: 800px;
      height: 300px;
      background-color: pink;
      /* 默认主轴是x轴 row */
      justify-content: center;
      /* 沿主轴来对齐 */

      /* 我们需要一个侧轴居中 */
      align-items: center;
    }

    div span {
      /* display: inline-block; */
      width: 150px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

</html>

同理：如果要三个盒子竖着水平居中并且垂直居中

只需要把三个横向的盒子扭过来就ok！

flex-direction: column; // 修改盒子的主轴为y轴

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 给父级添加flex属性 默认是沿着x轴 row*/
      display: flex;
      width: 800px;
      height: 300px;
      background-color: pink;
      /* 默认主轴是x轴 row */
      flex-direction: column;
      justify-content: center;
      /* 沿主轴来对齐 */

      /* 我们需要一个侧轴居中 */
      align-items: center;

      /* 沿着侧轴顶部 */
      /* align-items: flex-start; */

      /* 拉伸 子盒子不能有高度 */
      /* align-items: stretch; */
    }

    div span {
      /* display: inline-block; */
      width: 150px;
      height: 100px;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
</body>

</html>

拉伸：子盒子拉伸高度跟父盒子一样

子盒子不能给高度！

      /* 拉伸 子盒子不能有高度 */
      align-items: stretch;

3.6 align-content 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的。

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

多行！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* 给父级添加flex属性 默认是沿着x轴 row*/
      display: flex;
      width: 800px;
      height: 300px;
      background-color: pink;
      /* 换行 */
      flex-wrap: wrap;

      /* 多行 */
      /* 因为有了换行 此时我们侧轴上控制子元素的对齐方式 我们用 align-content */
      /* align-content: flex-start; */
      /* align-content: center; */
      /* align-content: space-between; */
      align-content: space-around;

    }

    div span {
      width: 150px;
      height: 100px;
      background-color: skyblue;
      margin: 10px;
    }
  </style>
</head>

<body>
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
  </div>
</body>

</html>

3.6 align-content 和 align-items 区别

align-items 适用于单行情况下，只有上对齐、下对齐、居中和拉伸
align-content适应于换行(多行)的情况下(单行情况下无效)，可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结就是单行找 align-items 多行找 align-content

3.7 flex-flow 是 flex-dirction 和 flex-wrap属性的复合属性合写

/* 设置主轴为列换列 */

/* flex-direction: column;

flex-wrap: wrap; */

/* flex-flow 是 flex-dirction 和 flex-wrap属性的复合属性合写 */

flex-flow: column wrap;

flex-direction:设置主轴的方向
justify-content:设置生轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式(多行)
align-items:设置侧轴上的子元素排列方式(单行)
flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

4. flex布局子项常见属性

4.1 flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数

.item {
    flex: <number>; /* default 0 */
}

这就是淘宝界面有名的圣杯布局：左右两侧沾满后中间留下的剩余空间就是给div2 来进行占用的份数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    section {
      display: flex;
      width: 60%;
      height: 150px;
      background-color: pink;
      margin: 0 auto;
    }

    section div:nth-child(1) {
      width: 100px;
      height: 150px;
      background-color: red;
    }

    section div:nth-child(2) {
      flex: 1;
      background-color: green;
    }

    section div:nth-child(3) {
      width: 100px;
      height: 150px;
      background-color: blue;
    }

    p {
      display: flex;
      width: 60%;
      height: 150px;
      background-color: pink;
      margin: 100px auto;
    }

    p span {
      /* 3个span 平均分成了3等分 */
      flex: 1;
    }

    p span:nth-child(2) {
      /* 2号占两份 */
      flex: 2;
      background-color: skyblue;
    }
  </style>
</head>

<body>
  <section>
    <div></div>
    <div></div>
    <div></div>
  </section>

  <p>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </p>
</body>

</html>

4.2 align-self 控制子项自己在侧轴上的排列方式

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

每次都是所有盒子一起移动，那么有没有什么办法能让一个盒子单独移动呢？？

    div {
      display: flex;
      width: 80%;
      height: 300px;
      background-color: pink;
      align-items: flex-end;
    }

    div span {
      width: 150px;
      height: 100px;
      background-color: skyblue;
      margin: 5px;
    }

有的兄弟有的！！！我们只想让3号盒子移动下来

    div {
      display: flex;
      width: 80%;
      height: 300px;
      background-color: pink;
      /* align-items: flex-end; */
    }

    div span {
      width: 150px;
      height: 100px;
      background-color: skyblue;
      margin: 5px;
    }

    div span:nth-child(3) {
      align-self: flex-end;
    }

将2号盒子往前移动

div span:nth-child(2) {

order: -1;

}

总结不易！本章节对我有很大的收获，希望对你也是！！！！

MCP技术社区

欢迎加入 MCP 技术社区！与志同道合者携手前行，一同解锁 MCP 技术的无限可能！

更多推荐

8种封装的1700V国产碳化硅(SiC)功率模块产品介绍及应用

MCP技术社区

（一篇入门）汽车电子电器之电机MCU控制器四

MCP技术社区

OpenCV C++ 入门实战：从基础操作到类封装全解析

Mat数据结构、图像读写、颜色空间转换、像素操作、算术运算和轨迹栏交互，以及面向对象封装思想。图像处理：学习滤波（高斯滤波、中值滤波）、边缘检测（Canny、Sobel）、形态学操作（腐蚀、膨胀）。目标检测：掌握轮廓提取（）、特征匹配（）、Haar 级联分类器。视频处理：使用读取视频，对帧进行实时处理。性能优化：学习多线程、GPU 加速（cv::cuda模块），提升处理速度。通过持续实践，可逐步掌