非零基础自学前端最后一遍一 HTML+CSS 17 CSS Flex布局

小鱼儿 2024-03-22 17:14 76阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  17 CSS Flex布局
         *   *  17.1 认识flex布局和flex布局的由来
             *   *  17.1.1 认识flexbox
                 *  17.1.2 原先的布局存在的痛点
                 *  17.1.3 flex布局的出现
             *  17.2 flex布局-两个重要概念
             *   *  17.2.1 flex布局的重要概念
             *  17.3 flex布局-布局模型-主轴和交叉轴
             *   *  17.3.1 flex布局的模型
                 *  17.3.2 flex相关的属性
             *  17.4 flex布局-container-flex-direction
             *   *  17.4.1 flex-direction
             *  17.5 flex布局-container-flex-wrap-flow
             *   *  17.5.1 flex-wrap
                 *  17.5.2 flex-flow
             *  17.6 flex布局-container-justify-content
             *   *  17.6.1 justify-content
             *  17.7 flex布局-container-align-items
             *   *  17.7.1 align-items
             *  17.8 flex布局-container-align-content
             *  17.9 flex布局-item-order
             *   *  17.9.1 flex-item属性 - order
             *  17.10 flex布局-item-align-self
             *   *  17.10.1 flex-item属性 - flex items
             *  17.11 flex布局-item-grow-shrink
             *   *  17.11.1 flex-item属性 - flex-grow
                 *  17.11.2 flex-item属性 - flex-shrink
             *  17.12 flex布局-item-flex-basis
             *   *  17.12.1 flex-item属性 - flex-basis
             *  17.13 flex布局-item-flex属性
             *   *  17.13.1 flex-item属性 - flex属性

![在这里插入图片描述][76ad8d5c3a9443e3bebcdcea236f0344.png_pic_center]

#### 一 HTML+CSS ####

#### 17 CSS Flex布局 ####

##### 17.1 认识flex布局和flex布局的由来 #####

###### 17.1.1 认识flexbox ######

*  Flexbox翻译为弹性盒子:
    
     *  弹性盒子是一种用于按行或按列布局元素的一维布局方法 ;
     *  元素可以膨胀以填充额外的空间, 收缩以适应更小的空间;
     *  通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);
 *  flex布局是目前web开发中使用最多的布局方案：
    
     *  flex 布局（Flexible 布局，弹性布局）;
     *  目前特别在移动端可以说已经完全普及;
     *  在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;
 *  为什么需要flex布局呢?
    
     *  长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 position。
     *  但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;

###### 17.1.2 原先的布局存在的痛点 ######

原来的布局存在哪些痛点呢? 举例说明:

*  比如在父内容里面垂直居中一个块内容。
    
    ![在这里插入图片描述][ee07d814a3c142be90dbacbd64d4a69a.png_pic_center]
 *  比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。
 *  比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。

###### 17.1.3 flex布局的出现 ######

*  所以长久以来, 大家非常期待一种真正可以用于对元素布局的方案: 于是flex布局出现了;
    
     *  Nature and nature’s laws lay hid in night; God said “Let Newton be” and all was light.
        
        自然与自然的法则在黑夜隐藏，于是上帝说，让牛顿出现吧！于是世界就明亮了起来.
 *  flexbox在使用时, 我们最担心的是它的兼容性问题:
    
     *  我们可以在caniuse上查询到具体的兼容性

![在这里插入图片描述][4e36262a2ab24bfebe137c053436b02b.png_pic_center]

##### 17.2 flex布局-两个重要概念 #####

###### 17.2.1 flex布局的重要概念 ######

*  两个重要的概念：
    
     *  开启了 flex 布局的元素叫 flex container
        
        ![在这里插入图片描述][56dcd1c6289545d187f82579e87c3230.png_pic_center]
     *  flex container 里面的直接子元素叫做 flex item
        
        ![在这里插入图片描述][3c08c96a68334b38b16f72d6420fcfbe.png_pic_center]
 *  当flex container中的子元素变成了flex item时, 具备一下特点:
    
     *  flex item的布局将受flex container属性的设置来进行控制和布局;
     *  flex item不再严格区分块级元素和行内级元素;
     *  flex item默认情况下是包裹内容的, 但是可以设置宽度和高度;
 *  设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
    
     *  flex： flex container 以 block-level 形式存在
     *  inline-flex： flex container 以 inline-level 形式存在

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box {
         
          /* flex: 块级盒子的flex-container */
          /* inline-flex: 了解, 行内级盒子的flex-container */
          display: flex;
          background-color: #f00;
        }
      </style>
    </head>
    
    <body>
    
      
      <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
      </div>
      
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][5f4f75d736e94e8bb695c8a317deaf00.png_pic_center]

##### 17.3 flex布局-布局模型-主轴和交叉轴 #####

###### 17.3.1 flex布局的模型 ######

![在这里插入图片描述][8f196aea77dd4013b11bbaf46053fc3b.png_pic_center]

###### 17.3.2 flex相关的属性 ######

应用在 flex container 上的 CSS 属性

*  flex-flow
 *  flex-direction
 *  flex-wrap
 *  flex-flow
 *  justify-content
 *  align-items
 *  align-content

应用在 flex items 上的 CSS 属性

*  flex-grow
 *  flex-basis
 *  flex-shrink
 *  order
 *  align-self
 *  flex

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box {
         
          display: flex;
          background-color: #f00;
    
          flex-wrap: wrap;
    
          width: 200px;
          height: 200px;
        }
    
        .item {
         
          width: 60px;
          height: 60px;
          background-color: orange;
        }
      </style>
    </head>
    
    <body>
    
      
      <div class="box">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">4</div>
        <div class="item">5</div>
      </div>
      
    
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][78195b61190b44149649db1d5877e486.png_pic_center]

##### 17.4 flex布局-container-flex-direction #####

###### 17.4.1 flex-direction ######

*  flex items 默认都是沿着 main axis（主轴）从 main start 开始往 main end 方向排布
    
     *  flex-direction 决定了 main axis 的方向，有 4 个取值
        
        row（默认值）、row-reverse、column、column-reverse

![在这里插入图片描述][8a155b0416eb48179812cc8820bb7841.png_pic_center]

![在这里插入图片描述][de861b274c9a490c957eb2b00dea9e8c.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .container {
         
          width: 500px;
          height: 500px;
          background-color: orange;
    
          display: flex;
    
          /* 修改主轴的方向 */
          /* row-reverse: row的反转 */
          /* column: 列变成主轴的方向 */
          /* column-reverse: 列主轴进行反转 */
          /* flex-direction: column-reverse; */
        }
    
        .item {
         
          width: 120px;
          height: 120px;
    
          background-color: #f00;
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
      </div>
    
      <script src="./js/itemRandomColor.js"></script>
    </body>
    
    </html>

itemRandomColor.js

function getRandomColor() {
        
      return `rgb(${
          Math.random()*255}, ${
          Math.random()*255}, ${
          Math.random()*255})`
    }
    
    const itemEls = document.querySelectorAll(".item")
    for (const item of itemEls) {
        
      item.style.backgroundColor = getRandomColor()
    }

渲染效果

![在这里插入图片描述][4c27dbc5292344d1bb56e3026ee5eee6.png_pic_center]

##### 17.5 flex布局-container-flex-wrap-flow #####

###### 17.5.1 flex-wrap ######

*  flex-wrap 决定了 flex container 是单行还是多行
    
     *  nowrap（默认）：单行
     *  wrap：多行
     *  wrap-reverse：多行（对比 wrap，cross start 与 cross end 相反）

![在这里插入图片描述][f9e50b675f864635816317881a5a0310.png_pic_center]

itemRandomColor.js

布局效果

![在这里插入图片描述][a797eb9be63046c8afe044cf9eb983ec.png_pic_center]

###### 17.5.2 flex-flow ######

flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

*  顺序任意, 并且都可以省略;

![在这里插入图片描述][05cead1fd23643878091058fa3e59051.png_pic_center]

渲染效果

![在这里插入图片描述][50988ff8e1ea4342b2c86ef08db4d6a5.png_pic_center]

##### 17.6 flex布局-container-justify-content #####

###### 17.6.1 justify-content ######

*  justify-content 决定了 flex items 在 main axis 上的对齐方式
    
     *  flex-start（默认值）：与 main start 对齐
     *  flex-end：与 main end 对齐
     *  center：居中对齐
     *  space-between：
        
         *  flex items 之间的距离相等
         *  与 main start、main end两端对齐
     *  space-around：
        
         *  flex items 之间的距离相等
         *  flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
     *  space-evenly：
        
         *  flex items 之间的距离相等
         *  flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离

![在这里插入图片描述][423bef1c415746f0bed6f969e2d7aa90.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .container {
         
          width: 500px;
          height: 500px;
          background-color: orange;
          /* padding: 0 10px; */
          box-sizing: border-box;
    
          display: flex;
    
          flex-wrap: wrap;
    
          /* 切换justify-content */
          /* flex-end: 让元素和main end对齐 */
          /* center: 居中对齐 */
          /* space-between: 两端个放一个元素, 其他多余的元素一定要空间等分 */
          /* space-evenly: 两端也有间距, 并且所有的空间进行等分 */
          /* space-around: 两端也有间距, 两端的间距是items之间的间距一半 */
          justify-content: space-between;
        }
    
        .item {
         
          width: 120px;
          height: 120px;
    
          background-color: #f00;
    
          /* margin-left: 20px; */
          /* margin: 0 20px; */
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
      </div>
    
      <script src="./js/itemRandomColor.js"></script>
    </body>
    
    </html>

itemRandomColor.js

function getRandomColor() {
        
      return `rgb(${
          Math.random() * 255}, ${
          Math.random() * 255}, ${
          Math.random() * 255})`
    }
    
    const itemEls = document.querySelectorAll(".item")
    for (const item of itemEls) {
        
      item.style.backgroundColor = getRandomColor()
    }

渲染效果

![在这里插入图片描述][35eec24d1b97466cb828e3c449c6cf9e.png_pic_center]

##### 17.7 flex布局-container-align-items #####

###### 17.7.1 align-items ######

*  align-items 决定了 flex items 在 cross axis 上的对齐方式
    
     *  normal：在弹性布局中，效果和stretch一样
     *  stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会 自动拉伸至填充 flex container
     *  flex-start：与 cross start 对齐
     *  flex-end：与 cross end 对齐
     *  center：居中对齐  baseline：与基准线对齐

![在这里插入图片描述][f37de3cc21c6442cbce19e82fa495617.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .container {
         
          width: 500px;
          height: 500px;
          background-color: orange;
          /* padding: 0 10px; */
          box-sizing: border-box;
    
          display: flex;
    
          align-items: stretch;
        }
    
        .item {
         
          width: 120px;
          /* height: 120px; */
        }
    
        .item1 {
         
          height: 80px;
          font-size: 30px;
        }
    
        .item2 {
         
          height: 150px;
          font-size: 40px;
        }
    
        .item3 {
         
          height: 60px;
          font-size: 12px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="item item1">1x</div>
        <div class="item item2">2x</div>
        <div class="item item3">3x</div>
        <div class="item item4">4x</div>
      </div>
    
      <script src="./js/itemRandomColor.js"></script>
    </body>
    
    </html>

itemRandomColor.js

function getRandomColor() {
        
      return `rgb(${
          Math.random() * 255}, ${
          Math.random() * 255}, ${
          Math.random() * 255})`
    }
    
    const itemEls = document.querySelectorAll(".item")
    for (const item of itemEls) {
        
      item.style.backgroundColor = getRandomColor()
    }

渲染效果

![在这里插入图片描述][d29443f1dcb543bf8b57e7a56844f5dd.png_pic_center]

##### 17.8 flex布局-container-align-content #####

*  align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似
    
     *  stretch（默认值）：与 align-items 的 stretch 类似
     *  flex-start：与 cross start 对齐
     *  flex-end：与 cross end 对齐
     *  center：居中对齐
     *  space-between：
        
         *  flex items 之间的距离相等
         *  与 cross start、cross end两端对齐
     *  space-around：
        
         *  flex items 之间的距离相等
         *  flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
     *  space-evenly：
        
         *  flex items 之间的距离相等
         *  flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离

![在这里插入图片描述][72a423ed154d486ab3fc8a517e98fb4c.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .container {
         
          width: 500px;
          height: 500px;
          background-color: orange;
    
          display: flex;
          flex-wrap: wrap;
    
          justify-content: space-between;
          align-content: center;
        }
    
        .item {
         
          width: 120px;
          height: 120px;
          /* margin-bottom: 10px; */
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="item item1">1x</div>
        <div class="item item2">2x</div>
        <div class="item item3">3x</div>
        <div class="item item4">4x</div>
        <div class="item item2">2x</div>
        <div class="item item3">3x</div>
        <div class="item item4">4x</div>
        <div class="item item2">2x</div>
        <div class="item item3">3x</div>
        <div class="item item4">4x</div>
      </div>
    
      <script src="./js/itemRandomColor.js"></script>
    </body>
    
    </html>

itemRandomColor.js

function getRandomColor() {
        
      return `rgb(${
          Math.random() * 255}, ${
          Math.random() * 255}, ${
          Math.random() * 255})`
    }
    
    const itemEls = document.querySelectorAll(".item")
    for (const item of itemEls) {
        
      item.style.backgroundColor = getRandomColor()
    }

渲染效果

![在这里插入图片描述][5e2384040bd3488899e85f735d952e28.png_pic_center]

##### 17.9 flex布局-item-order #####

###### 17.9.1 flex-item属性 - order ######

order 决定了 flex items 的排布顺序

*  可以设置任意整数（正整数、负整数、0），值越小就越排在前面
 *  默认值是 0

![在这里插入图片描述][30d212e914914f9b924d40b83644f99d.png_pic_center]

itemRandomColor.js

function getRandomColor() {
        
      return `rgb(${
          Math.random() * 255}, ${
          Math.random() * 255}, ${
          Math.random() * 255})`
    }
    
    const itemEls = document.querySelectorAll(".item")
    for (const item of itemEls) {
        
      item.style.backgroundColor = getRandomColor()
    }

渲染效果

![在这里插入图片描述][c0ed930430aa4869b2af8a23776a3917.png_pic_center]

##### 17.10 flex布局-item-align-self #####

###### 17.10.1 flex-item属性 - flex items ######

*  flex items 可以通过 align-self 覆盖 flex container 设置的 align-items
    
     *  auto（默认值）：遵从 flex container 的 align-items 设置
     *  stretch、flex-start、flex-end、center、baseline，效果跟 align-items 一致

![在这里插入图片描述][8dae0a8f9a854ddf8a74fc70279f1a05.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .container {
         
          width: 500px;
          height: 500px;
          background-color: orange;
    
          display: flex;
    
          align-items: center;
        }
    
        .item {
         
          width: 120px;
          height: 120px;
        }
    
        .item1 {
         
          height: 90px;
        }
    
        .item2 {
         
          height: 150px;
    
          align-self: flex-start;
        }
    
        .item3 {
         
          height: 120px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
      </div>
    
      <script src="./js/itemRandomColor.js"></script>
    </body>
    
    </html>

itemRandomColor.js

function getRandomColor() {
        
      return `rgb(${
          Math.random() * 255}, ${
          Math.random() * 255}, ${
          Math.random() * 255})`
    }
    
    const itemEls = document.querySelectorAll(".item")
    for (const item of itemEls) {
        
      item.style.backgroundColor = getRandomColor()
    }

渲染效果

![在这里插入图片描述][342e9f4783af4036b8a43cc73b3d5908.png_pic_center]

##### 17.11 flex布局-item-grow-shrink #####

###### 17.11.1 flex-item属性 - flex-grow ######

*  flex-grow 决定了 flex items 如何扩展(拉伸/成长)
    
     *  可以设置任意非负数字（正小数、正整数、0），默认值是 0
     *  当 flex container 在 main axis 方向上有剩余 size 时，flex-grow 属性才会有效
 *  如果所有 flex items 的 flex-grow 总和 sum 超过 1，每个 flex item 扩展的 size 为
    
     *  flex container 的剩余 size \* flex-grow / sum
        
        ![在这里插入图片描述][82c6636787634ea5a4426cfed6e89c46.png_pic_center]
 *  flex items 扩展后的最终 size 不能超过 max-width\\max-height

itemRandomColor.js

function getRandomColor() {
        
      return `rgb(${
          Math.random() * 255}, ${
          Math.random() * 255}, ${
          Math.random() * 255})`
    }
    
    const itemEls = document.querySelectorAll(".item")
    for (const item of itemEls) {
        
      item.style.backgroundColor = getRandomColor()
    }

渲染效果

![在这里插入图片描述][4cc3678b1d174282926bbebd16534073.png_pic_center]

###### 17.11.2 flex-item属性 - flex-shrink ######

*  flex-shrink 决定了 flex items 如何收缩(缩小)
    
     *  可以设置任意非负数字（正小数、正整数、0），默认值是 1
     *  当 flex items 在 main axis 方向上超过了 flex container 的 size，flex-shrink 属性才会有效
 *  如果所有 flex items 的 flex-shrink 总和超过 1，每个 flex item 收缩的 size为
    
     *  flex items 超出 flex container 的 size \* 收缩比例 / 所有 flex items 的收缩比例之和
 *  flex items 收缩后的最终 size 不能小于 min-width\\min-height

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .container {
         
          width: 500px;
          height: 500px;
          background-color: orange;
    
          display: flex;
        }
    
        .item {
         
          width: 120px;
          height: 120px;
    
          flex-shrink: 0;
        }
    
        .item1,
        .item2 {
         
          flex-shrink: 1;
        }
    
        .item1 {
         
          min-width: 100px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
      </div>
    
      <script src="./js/itemRandomColor.js"></script>
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][9b900c3ef7c94685b5df8921c99a0dd4.png_pic_center]

##### 17.12 flex布局-item-flex-basis #####

###### 17.12.1 flex-item属性 - flex-basis ######

*  flex-basis 用来设置 flex items 在 main axis 方向上的 base size
    
     *  auto（默认值）、具体的宽度数值（100px）
 *  决定 flex items 最终 base size 的因素，从优先级高到低
    
     *  max-width\\max-height\\min-width\\min-height
     *  flex-basis
     *  width\\height
     *  内容本身的 size

itemRandomColor.js

function getRandomColor() {
        
      return `rgb(${
          Math.random() * 255}, ${
          Math.random() * 255}, ${
          Math.random() * 255})`
    }
    
    const itemEls = document.querySelectorAll(".item")
    for (const item of itemEls) {
        
      item.style.backgroundColor = getRandomColor()
    }

渲染效果

![在这里插入图片描述][0530c4e6fb7b42ba8aecc36bc474942e.png_pic_center]

##### 17.13 flex布局-item-flex属性 #####

###### 17.13.1 flex-item属性 - flex属性 ######

*  flex 是 flex-grow || flex-shrink || flex-basis 的简写,flex 属性可以指定1个，2个或3个值。
    
    ![在这里插入图片描述][e533a60d666947b3bea0ad3d713fbb9c.png_pic_center]
 *  单值语法: 值必须为以下其中之一:
    
     *  一个无单位数(): 它会被当作的值。
     *  一个有效的宽度(width)值: 它会被当作 的值。
     *  关键字none，auto或initial.
 *  双值语法: 第一个值必须为一个无单位数，并且它会被当作 的值。
    
     *  第二个值必须为以下之一：
        
         *  一个无单位数：它会被当作 的值。
         *  一个有效的宽度值: 它会被当作 的值。
 *  三值语法:
    
     *  第一个值必须为一个无单位数，并且它会被当作 的值。
     *  第二个值必须为一个无单位数，并且它会被当作 的值。
     *  第三个值必须为一个有效的宽度值， 并且它会被当作 的值。

itemRandomColor.js

function getRandomColor() {
        
      return `rgb(${
          Math.random() * 255}, ${
          Math.random() * 255}, ${
          Math.random() * 255})`
    }
    
    const itemEls = document.querySelectorAll(".item")
    for (const item of itemEls) {
        
      item.style.backgroundColor = getRandomColor()
    }

渲染效果

![在这里插入图片描述][0e7f0230c5674ced8777522e2fdb4c3c.png_pic_center]

[76ad8d5c3a9443e3bebcdcea236f0344.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/38c659bf367b476fb389a2612c109c92.png
[ee07d814a3c142be90dbacbd64d4a69a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/24a611423db542188b72c85348aeb9bf.png
[4e36262a2ab24bfebe137c053436b02b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e16f861b1605423da073be29b91bf7d6.png
[56dcd1c6289545d187f82579e87c3230.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/315cd9efc09b482bbacabdd09102297f.png
[3c08c96a68334b38b16f72d6420fcfbe.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d9e773448fc74c0b83b5eff94a915226.png
[5f4f75d736e94e8bb695c8a317deaf00.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/ddfcacb553584cdebde7658be0f9b1bd.png
[8f196aea77dd4013b11bbaf46053fc3b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/307eb5264b5d487cae95254f5256305a.png
[78195b61190b44149649db1d5877e486.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6638be63cf7e416aa0c54bc7b1df7c1c.png
[8a155b0416eb48179812cc8820bb7841.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/4f3becb3eb28468aa686b2544f5f7e81.png
[de861b274c9a490c957eb2b00dea9e8c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/adb7cb0404dd40539821d45860c46ee0.png
[4c27dbc5292344d1bb56e3026ee5eee6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/37ff400039374094a8d585483ef7d092.png
[f9e50b675f864635816317881a5a0310.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/04b54740110e41be86b5d0e2c1ad60e0.png
[a797eb9be63046c8afe044cf9eb983ec.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/183095b6b9794272a708cc8f844a8198.png
[05cead1fd23643878091058fa3e59051.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e50050bde4504ff6a34584127e1ab641.png
[50988ff8e1ea4342b2c86ef08db4d6a5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3381c2cecb5e43b3a6219d3bb97bab53.png
[423bef1c415746f0bed6f969e2d7aa90.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/eb81cdc6871541a683a3e15ab6b5f500.png
[35eec24d1b97466cb828e3c449c6cf9e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/76691ef0d5904980a540d67f072c33d9.png
[f37de3cc21c6442cbce19e82fa495617.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/700c91437e0b4a07adf6d1800c63e781.png
[d29443f1dcb543bf8b57e7a56844f5dd.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/51a465e3df664ffa9a8a464542bc4cb6.png
[72a423ed154d486ab3fc8a517e98fb4c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/51c9a04aa9984d6ebe90896b813875b4.png
[5e2384040bd3488899e85f735d952e28.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/283f40ccdf0944c995bfaa3350f2ed63.png
[30d212e914914f9b924d40b83644f99d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/2e405294a3ce4227a07c48226039aec1.png
[c0ed930430aa4869b2af8a23776a3917.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/99e4402f2fcb4d8688babc43b26ae4d1.png
[8dae0a8f9a854ddf8a74fc70279f1a05.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a1d356831df0405899aad7b523a53df0.png
[342e9f4783af4036b8a43cc73b3d5908.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a5f23afedd614f968f66787b2f38d0d2.png
[82c6636787634ea5a4426cfed6e89c46.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/d981a8fc0391435b9af88dacf8310281.png
[4cc3678b1d174282926bbebd16534073.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/81ba162820f84889b5f99c7a9d80e126.png
[9b900c3ef7c94685b5df8921c99a0dd4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/af30dd8feb204a0e89dde83437d5b88b.png
[0530c4e6fb7b42ba8aecc36bc474942e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/c6ea567108514e34a005cb7d775dd43b.png
[e533a60d666947b3bea0ad3d713fbb9c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/233860bef9fb4c77ad80e3b35f76fb21.png
[0e7f0230c5674ced8777522e2fdb4c3c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/b5abacfef2024bfb9968dc936d93ba43.png