search

博客列表 >Flex项目属性的用法 - 九期线上班

Flex项目属性的用法 - 九期线上班

fkkf467
fkkf467原创
2019年11月08日 13:18:44658浏览

1. 设置弹性元素的增长因子（flex-grow）

设置项目的放大比例, 默认为0: 不放大,哪怕轴上有剩余空间
CSS语法: flex-grow: number|initial|inherit;
属性值：

  • number：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0
  • initial：设置该属性为它的默认值

  • inherit：从父元素继承该属性

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>设置弹性元素的增长因子</title>
    6.   <style>
    7.       /*弹性容器通用样式*/
    8.       .container {
    9.           border: 2px dashed greenyellow;
    10.           margin: 15px;
    11.           background-color: grey;
    12.           width: 550px;
    13.       }
    15.       /*弹性元素通用样式*/
    16.       .item {
    17.           box-sizing: border-box;
    18.           border: 1px solid red;
    19.           padding: 20px;
    20.           background-color: lightpink;
    21.           width: 100px;
    22.       }
    24.       /*块级弹性容器*/
    25.       .flex {
    26.           display: flex;
    27.       }
    29.       /*默认值为0*/
    30.       .demo01 > .item {
    31.           flex-grow: 0;
    32.       }
    34.       /*第一个与第三个增长量的属性可以省略*/
    35.       .demo02 > .item:first-of-type {
    36.           /*flex-grow: 0;*/
    37.       }
    38.       .demo02 > .item:nth-of-type(2) {
    39.           flex-grow: 1;
    40.       }
    41.       .demo02 > .item:last-of-type {
    42.           /*flex-grow: 0;*/
    43.       }
    45.       .demo03 > .item:first-of-type {
    46.           flex-grow: 1;
    47.       }
    48.       .demo03 > .item:nth-of-type(2) {
    49.           flex-grow: 2;
    50.       }
    51.       .demo03 > .item:last-of-type {
    52.           flex-grow: 3;
    53.       }
    54.       /*
    55.       计算步骤：
    56.           1. 获取基本变量
    57.               1.1 可分配空间：550px - (100px + 100px +100px) = 250px
    58.               1.2 增长因子：第一个: 1, 第二个: 2, 第三个: 3
    59.               1.3 增长因子之和: 1 + 2 + 3 = 6
    60.           2. 计算增长比例
    61.               2.1 计算公式：增长比例 = 增长因子 / 增长因子之和
    62.               2.2 第一个元素：1 / 6 = 0.167
    63.               2.3 第二个元素：2 / 6 = 0.333
    64.               2.4 第三个元素：3 / 6 = 0.5
    65.           3. 计算每个元素的增长量
    66.               3.1 第一个元素：250px * 0.167 = 41.75px
    67.               3.2 第二个元素：250px * 0.333 = 83.25px
    68.               3.3 第三个元素：250px * 0.5 = 125px
    69.           4. 计算每个元素的最终宽度
    70.               4.1 第一个元素：100px + 41.75px = 141.75px
    71.               4.2 第二个元素：100px + 83.25px = 183.25px
    72.               4.3 第三个元素：100px + 125px = 225px
    73.        */
    74.       .demo04 > .item:first-of-type {
    75.           flex-grow: 0.3;
    76.       }
    77.       .demo04 > .item:nth-of-type(2) {
    78.           flex-grow: 0.1;
    79.       }
    80.       .demo04 > .item:last-of-type {
    81.           flex-grow: 0.6;
    82.       }
    83.       .demo05 > .item:first-of-type {
    84.           width: 75px;
    85.           flex-grow: 2;
    86.       }
    87.       .demo05 > .item:nth-of-type(2) {
    88.           width: 150px;
    89.           flex-grow: 3;
    90.       }
    91.       .demo05 > .item:last-of-type {
    92.           width: 165px;
    93.           flex-grow: 7;
    94.       }
    95.       /*
    96.       计算步骤：
    97.           1. 获取基本变量
    98.               1.1 可分配空间：550px - (75px + 150px + 165px) = 160px
    99.               1.2 增长因子：第一个: 2, 第二个: 3, 第三个: 7
    100.               1.3 增长因子之和: 2 + 3 + 7 = 12
    101.           2. 计算增长比例
    102.               2.1 计算公式：增长比例 = 增长因子 / 增长因子之和
    103.               2.2 第一个元素：2 / 12 = 0.167
    104.               2.3 第二个元素：3 / 12 = 0.25
    105.               2.4 第三个元素：7 / 12 = 0.583
    106.           3. 计算每个元素的增长量
    107.               3.1 第一个元素：160px * 0.167 = 26.72px
    108.               3.2 第二个元素：160px * 0.25 = 40px
    109.               3.3 第三个元素：160px * 0.583 = 93.28px
    110.           4. 计算每个元素的最终宽度
    111.               4.1 第一个元素：75px + 26.72px = 101.72px
    112.               4.2 第二个元素：150px + 40px = 190px
    113.               4.3 第三个元素：165px + 93.28px = 258.28px
    114.        */
    115.   </style>
    116. </head>
    117. <body>
    118. <h1>设置弹性元素的增长因子</h1>
    119. <h3>1. 所有弹性元素不增长，以原始宽度显示，增长因子为：0（默认）</h3>
    120. <div class="container flex demo01">
    121.   <span class="item">item1</span>
    122.   <span class="item">item2</span>
    123.   <span class="item">item3</span>
    124. </div>
    125. <h3>2. 将全部的剩余空间分配给指定弹性元素</h3>
    126. <div class="container flex demo02">
    127.   <span class="item">item1</span>
    128.   <span class="item">item2</span>
    129.   <span class="item">item3</span>
    130. </div>
    131. <h3>3. 全部剩余空间按增长因子在不同弹性元素间分配</h3>
    132. <div class="container flex demo03">
    133.   <span class="item">item1</span>
    134.   <span class="item">item2</span>
    135.   <span class="item">item3</span>
    136. </div>
    137. <h3>4. 增长因子支持小数, 因为是按增长比例分配</h3>
    138. <div class="container flex demo04">
    139.   <span class="item">item1</span>
    140.   <span class="item">item2</span>
    141.   <span class="item">item3</span>
    142. </div>
    143. <h3>5. 每个弹性元素宽度不同时, 同样适用以上分配规律</h3>
    144. <div class="container flex demo05">
    145.   <span class="item">item1</span>
    146.   <span class="item">item2</span>
    147.   <span class="item">item3</span>
    148. </div>
    149. </body>
    150. </html>

    2. 设置弹性元素的缩减因子（flex-shrink）

    设置了项目的缩小比例,默认为1, 即空间不足时, 自动缩小填充
    CSS语法:flex-shrink: number|initial|inherit;
    属性值：

    • number：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1
    • initial：设置该属性为它的默认值
    • inherit：从父元素继承该属性
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>设置弹性元素的缩减因子</title>
  6.     <style>
  7.         /*弹性容器通用样式*/
  8.         .container {
  9.             border: 2px dashed greenyellow;
  10.             margin: 15px;
  11.             background-color: grey;
  12.             width: 550px;
  13.         }
  15.         /*弹性元素通用样式*/
  16.         .item {
  17.             box-sizing: border-box;
  18.             border: 1px solid red;
  19.             padding: 20px;
  20.             background-color: lightpink;
  21.             width: 250px;
  22.         }
  24.         /*块级弹性容器*/
  25.         .flex {
  26.             display: flex;
  27.         }
  28.         /*所有元素不缩减，以原始宽度显示*/
  29.         /*设置缩减因子为：0*/
  30.         .demo01 > .item {
  31.             flex-shrink: 0;
  32.         }
  33.         /*
  34.         所有元素自动缩放适应容器宽度且不换行显示
  35.         设置缩减因子: 1 (默认值/初始值)
  36.         */
  37.         .demo02 > .item {
  38.             flex-shrink: 1;
  39.         }
  40.         .demo03 > .item:first-of-type {
  41.             flex-shrink: 1;
  42.         }
  43.         .demo03 > .item:nth-of-type(2) {
  44.             flex-shrink: 2;
  45.         }
  46.         .demo03 > .item:last-of-type {
  47.             flex-shrink: 3;
  48.         }
  49.         /*
  50.         计算步骤
  51.             1 获取基本变量
  52.                 1.1 多余待缩放空间  ( 250px + 250px + 250px ) - 550px = 200px
  53.                 1.2 各元素缩减因子：第一个：1，第二个：2，第三个：3
  54.                 1.3 缩减因子之和：1 + 2 + 3 = 6
  55.             2 计算缩减比例
  56.                 1.1 缩减比例 = 缩减因子 / 缩减因子之和
  57.                 1.2 第一个元素缩减比例：1 / 6 = 0.167
  58.                 1.3 第二个元素缩减比例：2 / 6 = 0.333
  59.                 1.4 第三个元素缩减比例：3 / 6 = 0.5
  60.             3 计算每个元素的缩减
  61.                 3.1 第一个元素：200px * 0.167 = 33.4px
  62.                 3.2 第二个元素：200px * 0.333 = 66.6px
  63.                 3.3 第三个元素：200px * 0.5 = 100px
  64.             4 计算每个元素的最终宽度
  65.                 4.1 第一个元素：250px - 33.4px = 216.6px
  66.                 4.2 第二个元素：250px - 66.6px = 183.4px
  67.                 4.3 第三个元素：250px - 100px = 150px
  68.          */
  69.         .demo04 > .item:first-of-type {
  70.             flex-shrink: 0.2;
  71.         }
  72.         .demo04 > .item:nth-of-type(2) {
  73.             flex-shrink: 0.4;
  74.         }
  75.         .demo04 > .item:last-of-type {
  76.             flex-shrink: 0.4;
  77.         }
  78.         .demo05 > .item:first-of-type {
  79.             width: 175px;
  80.             flex-shrink: 2;
  81.         }
  82.         .demo05 > .item:nth-of-type(2) {
  83.             width: 225px;
  84.             flex-shrink: 2;
  85.         }
  86.         .demo05 > .item:last-of-type {
  87.             width: 410px;
  88.             flex-shrink: 5;
  89.         }
  90.         /*
  91.         元素总宽度：175px + 225px + 410px = 810px
  92.         容器宽度550px, 于是有260px的等缩减空间, 需要在每个元素中进行摊派
  93.         1. 计算缩减因子的缩小比例：等待缩减空间 / 每个弹性元素的宽度与缩减因子乘积的总和
  94.         缩减因子的缩小比例：260 / ((175*2)+(225*2)+(410*5)) = 260 / 2850 = 0.091
  95.         2. 计算每个元素的缩减量：元素宽度*（缩减因子 * 缩减因子的缩减比例）
  96.         第一个元素: 175 * ( 2 * 0.091) = 31.85px
  97.         第二个元素: 225 * ( 2 * 0.091) = 40.95px
  98.         第三个元素: 410 * ( 5 * 0.091) = 186.55px
  99.         3. 计算每个元素最终宽度
  100.         第一个元素: 175 - 31.85 = 143.15px
  101.         第二个元素: 225 - 40.95 = 184.05px
  102.         第三个元素: 410 - 186.55 = 223.45px
  103.         */
  104.     </style>
  105. </head>
  106. <body>
  107. <h1>设置弹性元素的缩减因子</h1>
  108. <h3>1. 所有弹性元素不缩减,以原始宽度显示,缩减因子为: 0</h3>
  109. <div class="container flex demo01">
  110.     <span class="item">item1</span>
  111.     <span class="item">item2</span>
  112.     <span class="item">item3</span>
  113. </div>
  115. <h3>2. 所有弹性元素自适应容器宽度且不换行,缩减因子: 1 (默认)</h3>
  116. <div class="container flex demo02">
  117.     <span class="item">item1</span>
  118.     <span class="item">item2</span>
  119.     <span class="item">item3</span>
  120. </div>
  122. <h3>3. 当三个弹性元素的缩减因子不相等时</h3>
  123. <div class="container flex demo03">
  124.     <span class="item">item1</span>
  125.     <span class="item">item2</span>
  126.     <span class="item">item3</span>
  127. </div>
  129. <h3>4. 缩减因子也可以是小数,只要大于0就可以</h3>
  130. <div class="container flex demo04">
  131.     <span class="item">item1</span>
  132.     <span class="item">item2</span>
  133.     <span class="item">item3</span>
  134. </div>
  136. <h3>5. 当每个弹性元素宽度不一样时, 完全是另一道风景线</h3>
  137. <div class="container flex demo05">
  138.     <span class="item">item1</span>
  139.     <span class="item">item2</span>
  140.     <span class="item">item3</span>
  141. </div>
  142. </body>
  143. </html>

3. 设置弹性元素的基准尺寸（flex-basis）

定义了在计算分配主轴上剩余空间之前, 项目占据的主轴空间(main size)
CSS语法:flex-basis: number|auto|initial|inherit;
属性值

  • number：一个长度单位或者一个百分比，规定灵活项目的初始长度
  • auto：默认值。长度等于灵活项目的长度。如果该项目未指定长度，则长度将根据内容决定
  • initial：设置该属性为它的默认值
  • inherit：从父元素继承该属性
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>设置弹性元素的基准尺寸</title>
  6.     <style>
  7.         /*弹性容器通用样式*/
  8.         .container {
  9.             border: 2px dashed greenyellow;
  10.             margin: 15px;
  11.             background-color: grey;
  12.             width: 550px;
  13.         }
  15.         /*弹性元素通用样式*/
  16.         .item {
  17.             box-sizing: border-box;
  18.             border: 1px solid red;
  19.             padding: 20px;
  20.             background-color: lightpink;
  21.         }
  23.         /*块级弹性容器*/
  24.         .flex {
  25.             display: flex;
  26.         }
  27.         /*在未设置弹性元素宽度时, 以内容宽度显示*/
  28.         .demo01 > .item {
  29.             flex-basis: content;
  30.         }
  31.         /*存在自定义宽度时，以该宽度显示*/
  32.         .demo02 > .item {
  33.             width: 100px;
  34.         }
  35.         /*如果元素设置了宽度，则以该宽度显示*/
  36.         /*如果元素的宽度也是auto,或者没有定义, 就按内容宽度content显示*/
  37.         .demo03 > .item {
  38.             flex-basis: auto;
  39.         }
  40.         /*当元素存在自定义宽度与基准宽度时, 以基准宽度为准*/
  41.         .demo04 > .item {
  42.             width: 120px;
  43.             flex-basis: 150px;
  44.         }
  45.         .demo05 > :first-of-type {
  46.             flex-basis: 20%;
  47.         }
  48.         .demo05 > :nth-of-type(2) {
  49.             flex-basis: 30%;
  50.         }
  51.         .demo05 > :last-of-type {
  52.             flex-basis: 50%;
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57. <h1>flex-basis：设置弹性元素的基准尺寸</h1>
  58. <h3>1: 在未设置弹性元素宽度时, 以内容宽度显示</h3>
  59. <div class="container flex demo01">
  60.     <span class="item">item1</span>
  61.     <span class="item">item2</span>
  62.     <span class="item">item3</span>
  63. </div>
  65. <h3>2: 存在自定义宽度时，以该宽度显示</h3>
  66. <div class="container flex demo02">
  67.     <span class="item">item1</span>
  68.     <span class="item">item2</span>
  69.     <span class="item">item3</span>
  70. </div>
  72. <h3>3: 自动状态下，由浏览器根据预设值自行判定</h3>
  73. <div class="container flex demo03">
  74.     <span class="item">item1</span>
  75.     <span class="item">item2</span>
  76.     <span class="item">item3</span>
  77. </div>
  79. <h3>4: 当元素存在自定义宽度与基准宽度时, 以基准宽度为准</h3>
  80. <div class="container flex demo04">
  81.     <span class="item">item1</span>
  82.     <span class="item">item2</span>
  83.     <span class="item">item3</span>
  84. </div>
  86. <h3>5: 元素基准宽度支持百分比设置</h3>
  87. <div class="container flex demo05">
  88.     <span class="item">item1</span>
  89.     <span class="item">item2</span>
  90.     <span class="item">item3</span>
  91. </div>
  92. </body>
  93. </html>

4. 简化弹性元素的基本设置（flex）

flex属性是前面flex-grow,flex-shrink和flex-basis属性的简写
CSS语法:flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
属性值：

  • flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量
  • flex-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量
  • flex-basis：项目的长度。合法值：”auto”、”inherit” 或一个后跟 “%”、”px”、”em” 或任何其他长度单位的数字
  • auto：与 1 1 auto 相同
  • none：与0 0 auto 相同
  • initial：设置该属性为它的默认值，即为 0 1 auto
  • inherit：从父元素继承该属性
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>简化弹性元素的基本设置</title>
  6.     <style>
  7.         /*弹性容器通用样式*/
  8.         .container {
  9.             border: 2px dashed greenyellow;
  10.             margin: 15px;
  11.             background-color: grey;
  12.             width: 550px;
  13.         }
  15.         /*弹性元素通用样式*/
  16.         .item {
  17.             box-sizing: border-box;
  18.             border: 1px solid red;
  19.             padding: 20px;
  20.             background-color: lightpink;
  21.         }
  23.         /*块级弹性容器*/
  24.         .flex {
  25.             display: flex;
  26.         }
  27.         /*根据weight,height计算，并且允许缩减大小适应容器*/
  28.         .demo01 > .item {
  29.             width: 100px;
  30.             height: 60px;
  32.             flex: initial;
  33.             /*等价于默认值*/
  34.             /*flex: 0 1 auto;*/
  35.         }
  36.         .demo02 > .item {
  37.             width: 100px;
  38.             height: 60px;
  40.             flex: auto;
  41.             /*等价于*/
  42.             /*flex: 1 1 auto;*/
  43.         }
  44.         .demo03 > .item {
  45.             width: 100px;
  46.             height: 60px;
  48.             flex: none;
  49.             /*等价于: */
  50.             /*flex: 0 0 auto;*/
  51.         }
  52.         .demo04 > .item {
  53.             width: 100px;
  54.             height: 60px;
  56.             flex: 1;
  57.             /*等价于*/
  58.             /*flex-grow: 1;*/
  59.             /*等价于:*/
  60.             /*flex: 1 1 auto;*/
  61.         }
  62.         .demo05 > .item {
  63.             width: 100px;
  64.             height: 60px;
  65.             flex: 1 0 200px;
  66.         }
  67.         .demo06 > .item {
  68.             width: 100px;
  69.             height: 60px;
  70.         }
  71.         .demo06 > .item:first-of-type {
  72.             flex: 1 1 20%;
  73.         }
  74.         /*因为第一个元素设置了可增长，所以20%没用*/
  75.     </style>
  76. </head>
  77. <body>
  78. <h1>简化弹性元素的基本设置</h1>
  80. <h3>1: 根据宽度计算,允许缩减适应容器</h3>
  81. <div class="container flex demo01">
  82.     <span class="item">item1</span>
  83.     <span class="item">item2</span>
  84.     <span class="item">item3</span>
  85. </div>
  87. <h3>2: 根据宽度计算,元素完全弹性以适应容器</h3>
  88. <div class="container flex demo02">
  89.     <span class="item">item1</span>
  90.     <span class="item">item2</span>
  91.     <span class="item">item3</span>
  92. </div>
  94. <h3>3: 元素完全失去弹性, 以原始大小呈现</h3>
  95. <div class="container flex demo03">
  96.     <span class="item">item1</span>
  97.     <span class="item">item2</span>
  98.     <span class="item">item3</span>
  99. </div>
  101. <h3>4: 一个数值表示增长因子，其他值默认：flex: 1 1 auto</h3>
  102. <div class="container flex demo04">
  103.     <span class="item">item1</span>
  104.     <span class="item">item2</span>
  105.     <span class="item">item3</span>
  106. </div>
  108. <h3>5: 第三个数有具体数值时，以它为计算标准</h3>
  109. <div class="container flex demo05">
  110.     <span class="item">item1</span>
  111.     <span class="item">item2</span>
  112.     <span class="item">item3</span>
  113. </div>
  115. <h3>6: 单独设置某一个元素弹性大小</h3>
  116. <div class="container flex demo06">
  117.     <span class="item">item1</span>
  118.     <span class="item">item2</span>
  119.     <span class="item">item3</span>
  120. </div>
  121. </body>
  122. </html>

5. 单独设置元素在交叉轴上排列方式（align-self）

该属性允许单个项目有与其它项目不一样的对齐方式, 可覆盖掉容器的flex-items
CSS 语法：align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
属性值：

  • auto：默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”
  • stretch：元素被拉伸以适应容器
  • center：元素位于容器的中心
  • flex-start：元素位于容器的开头
  • flex-end：元素位于容器的结尾
  • baseline：元素位于容器的基线上
    initial：设置该属性为它的默认值
  • inherit：从父元素继承该属性
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>单独设置元素在交叉轴上排列方式</title>
  6.     <style>
  7.         .container {
  8.             border: 2px dashed greenyellow;
  9.             margin: 15px;
  10.             background-color: grey;
  11.             width: 800px;
  12.             height: 500px;
  13.             /*以主轴垂直为例进行演示*/
  14.             flex-flow: column nowrap;
  15.             /*默认元素紧贴终止线排列*/
  16.             align-items: flex-end;
  17.         }
  18.         .item {
  19.             box-sizing: border-box;
  20.             border: 1px solid red;
  21.             padding: 20px;
  22.             background-color: lightpink;
  23.             width: 120px;
  24.             height: 60px;
  25.         }
  26.         .flex {
  27.             display: flex;
  28.         }
  29.         .item:first-of-type {
  30.             align-self: auto;
  31.             background-color: lightpink;
  32.         }
  33.         .item:nth-of-type(2) {
  34.             width: auto;
  35.             align-self: stretch;
  36.             background-color: lightseagreen;
  37.         }
  38.         .item:nth-of-type(3) {
  39.             align-self: center;
  40.             background-color: lightslategrey;
  41.         }
  42.         .item:nth-of-type(4) {
  43.             align-self: flex-start;
  44.             background-color: lightcyan;
  45.         }
  46.         .item:nth-last-of-type(3) {
  47.             align-self: flex-end;
  48.             background-color: lightgreen;
  49.         }
  50.         .item:nth-last-of-type(2) {
  51.             align-self: baseline;
  52.             background-color: lightblue;
  53.         }
  54.         .item:last-of-type {
  55.             align-self: initial;
  56.             background-color: olivedrab;
  57.         }
  58.     </style>
  59. </head>
  60. <body>
  61. <h1>单独设置元素在交叉轴上排列方式</h1>
  62. <div class="container flex">
  63.     <span class="item">auto</span>
  64.     <span class="item">stretch</span>
  65.     <span class="item">center</span>
  66.     <span class="item">flex-start</span>
  67.     <span class="item">flex-end</span>
  68.     <span class="item">baseline</span>
  69.     <span class="item">initial</span>
  70. </div>
  71. </body>
  72. </html>

6. 设置元素的排列顺序（order）

定义项目的排列顺序。数值越小，排列越靠前，默认为0
CSS语法:order: number|initial|inherit;
属性值：

  • number：默认值是 0。规定灵活项目的顺序
  • initial：设置该属性为它的默认值
  • inherit：从父元素继承该属性
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>设置元素的排列顺序</title>
  6.     <style>
  7.         .container {
  8.             border: 2px dashed red;
  9.             background-color: #ededed;
  10.             margin: 20px;
  11.             display: flex;
  12.             width: 600px;
  13.             justify-content: center;
  14.         }
  15.         .item {
  16.             width: 100px;
  17.             height: 60px;
  18.             box-sizing: border-box;
  19.             border: 1px solid lightgreen;
  20.             padding: 20px;
  21.             background-color: yellow;
  22.             margin: 0 20px;
  23.         }
  24.         .item:first-of-type {
  25.             order: 1;
  26.         }
  27.         .item:nth-of-type(2) {
  28.             order: 3;
  29.         }
  30.         .item:nth-last-of-type(2) {
  31.             order: 2;
  32.         }
  33.         .item:last-of-type {
  34.             order: 0;
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39. <h1>设置元素的排列顺序</h1>
  40. <div class="container">
  41.     <span class="item">item1</span>
  42.     <span class="item">item2</span>
  43.     <span class="item">item3</span>
  44.     <span class="item">item4</span>
  45. </div>
  46. </body>
  47. </html>

7. flex实现圣杯布局

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>flex实现圣杯布局</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body {
  12.             display: flex;
  13.             flex-flow: column nowrap;
  14.             height: 100vh;
  15.         }
  16.         header, footer {
  17.             height: 60px;
  18.             background-color: lightblue;
  19.         }
  20.         main {
  21.             display: flex;
  22.             flex: 1;
  23.         }
  24.         main > article {
  25.             flex: 1;
  26.             background-color: lightgreen;
  27.         }
  28.         main > aside {
  29.             width: 200px;
  30.             background-color: lightseagreen;
  31.         }
  32.         main > aside:first-of-type {
  33.             order: -1;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38. <header>顶部</header>
  39. <main>
  40.     <article>主体内容区</article>
  41.     <aside>左侧</aside>
  42.     <aside>右侧</aside>
  43. </main>
  44. <footer>底部</footer>
  45. </body>
  46. </html>

8. 仿小米商城首页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>仿小米商城首页</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  12.         a {
  13.             text-decoration: none;
  14.             color: white;
  15.         }
  17.         li {
  18.             list-style-type: none;
  19.         }
  21.         body {
  22.             min-width: 1280px;
  23.             height: 100vh;
  24.         }
  26.         header {
  27.             height: 40px;
  28.             background-color: #333333;
  29.             box-sizing: border-box;
  30.         }
  32.         .container {
  33.             box-sizing: border-box;
  34.             margin: 0 auto;
  35.             width: 1226px;
  36.             height: 40px;
  37.             display: flex;
  38.             justify-content: space-between;
  39.             align-items: center;
  40.             font-size: 12px;
  41.         }
  43.         .container > a {
  44.             color: #B0B0B0;
  45.             border-right: 1px solid #424242;
  46.             padding-right: 10px;
  47.         }
  49.         .container > a:nth-last-of-type(5) {
  50.             margin-right: 210px;
  51.             border-right: none;
  52.         }
  54.         .container > a:nth-last-of-type(2) {
  55.             border-right: none;
  56.             margin-right: 10px;
  57.         }
  59.         .container > a:last-of-type {
  60.             padding-right: 0;
  61.             border-right: none;
  62.             width: 120px;
  63.             height: 40px;
  64.             box-sizing: border-box;
  65.             display: flex;
  66.             justify-content: center;
  67.             align-items: center;
  68.             background-color: #424242;
  69.         }
  71.         .container > a:hover {
  72.             color: white;
  73.         }
  75.         .container > a:last-of-type:hover {
  76.             background: white;
  77.             color: #FF832F;
  78.             cursor: pointer;
  79.         }
  81.         nav {
  82.             margin: 25px auto;
  83.             width: 1226px;
  84.             height: 55px;
  85.             display: flex;
  86.             justify-content: space-between;
  87.             align-items: center;
  88.             box-sizing: border-box;
  89.         }
  91.         nav a {
  92.             color: #333333;
  93.             font-size: 16px;
  94.         }
  96.         nav > a:first-of-type > img {
  97.             width: 55px;
  98.             height: 55px;
  99.         }
  101.         nav > form {
  102.             width: 296px;
  103.             height: 50px;
  104.             box-sizing: border-box;
  105.             display: flex;
  106.         }
  108.         nav > form > input {
  109.             box-sizing: border-box;
  110.             flex: 1;
  111.             padding: 0 10px;
  112.             border: 1px solid #ededed;
  113.             border-right: none;
  114.         }
  116.         nav > form > label {
  117.             box-sizing: border-box;
  118.             width: 52px;
  119.             display: flex;
  120.             align-items: center;
  121.             justify-content: center;
  122.             border: 1px solid #ededed;
  123.         }
  125.         nav > form > label:hover {
  126.             background: #FF6700;
  127.             color: white;
  128.             cursor: pointer;
  129.         }
  131.         nav > div {
  132.             margin-left: 50px;
  133.         }
  135.         nav > div > a {
  136.             margin: 0 5px;
  137.         }
  139.         nav > div > a:hover {
  140.             color: #FF832F;
  141.         }
  143.         main {
  144.             width: 1226px;
  145.             margin: 0 auto;
  146.         }
  148.         main > article:first-of-type {
  149.             display: flex;
  150.             box-sizing: border-box;
  151.         }
  153.         main > article:first-of-type > ul {
  154.             background: #8B9DA3;
  155.             box-sizing: border-box;
  156.             width: 234px;
  157.             height: 460px;
  158.             display: flex;
  159.             flex-flow: column nowrap;
  160.             justify-content: center;
  161.         }
  163.         main > article:first-of-type > ul > li {
  164.             box-sizing: border-box;
  165.             width: 234px;
  166.             height: 42px;
  167.             padding: 0 30px;
  168.             display: flex;
  169.             justify-content: space-between;
  170.             align-items: center;
  171.             cursor: pointer;
  172.         }
  174.         main > article:first-of-type > ul > li:hover {
  175.             background: #FF6700;
  176.         }
  178.         main > article:first-of-type > ul > li > span {
  179.             color: #ededed;
  180.         }
  182.         main > article:first-of-type > img {
  183.             width: 992px;
  184.             height: 460px;
  185.         }
  187.         main > article:nth-of-type(2) {
  188.             display: flex;
  189.             box-sizing: border-box;
  190.             margin: 20px 0;
  191.             justify-content: space-between;
  192.         }
  194.         main > article:nth-of-type(2) > div {
  195.             width: 234px;
  196.             height: 170px;
  197.             box-sizing: border-box;
  198.             background: #5F5750;
  199.             padding: 5px;
  200.             display: flex;
  201.             flex-flow: row wrap;
  202.             justify-content: center;
  203.             align-items: center;
  204.         }
  206.         main > article:nth-of-type(2) > div li a {
  207.             display: flex;
  208.             flex-flow: column nowrap;
  209.             align-items: center;
  210.             box-sizing: border-box;
  211.             margin: 10px;
  212.         }
  214.         main > article:nth-of-type(2) > div img {
  215.             width: 24px;
  216.         }
  218.         main > article:nth-of-type(2) > div > ul {
  219.             display: flex;
  220.         }
  222.         main > article:nth-of-type(2) > div > ul > li > a > span {
  223.             font-size: 12px;
  224.             color: #CFCCCA;
  225.             margin-top: 3px;
  226.         }
  228.         main > article:nth-of-type(2) > div > ul > li > a > span:hover {
  229.             color: white;
  230.         }
  232.         main > article:nth-of-type(2) > a {
  233.             box-sizing: border-box;
  234.             height: 170px;
  235.         }
  237.         main > article:nth-of-type(2) > a > img {
  238.             width: 316px;
  239.             height: 170px;
  240.         }
  242.         main > article:nth-of-type(2) > a:hover {
  243.             box-shadow: 0 0 3px #757575;
  244.         }
  246.         .page-main {
  247.             background: #F5F5F5;
  248.             height: 600px;
  249.         }
  251.         .recommend > h2 {
  252.             margin-top: 20px;
  253.             color: #333333;
  254.             font-size: 22px;
  255.             font-weight: normal;
  256.         }
  258.         .recommend {
  259.             width: 1226px;
  260.             margin: 0 auto;
  261.             display: flex;
  262.             flex-flow: column nowrap;
  263.         }
  265.         .recommend > ul {
  266.             display: flex;
  267.             justify-content: space-between;
  268.             box-sizing: border-box;
  269.             margin: 20px 0;
  270.         }
  272.         .recommend > ul > li > a {
  273.             box-sizing: border-box;
  274.             width: 234px;
  275.             height: 340px;
  276.             display: flex;
  277.             flex-flow: column nowrap;
  278.             align-items: center;
  279.             justify-content: center;
  280.             background: white;
  281.         }
  283.         .recommend > ul > li:first-of-type > a {
  284.             background: #F1EDED;
  285.             border-top: 1px solid red;
  286.         }
  288.         .recommend > ul > li:nth-of-type(2) > a {
  289.             border-top: 1px solid #FFAC13;
  290.         }
  292.         .recommend > ul > li:nth-of-type(3) > a {
  293.             border-top: 1px solid #83C44E;
  294.         }
  296.         .recommend > ul > li:nth-last-of-type(2) > a {
  297.             border-top: 1px solid #2196F3;
  298.         }
  300.         .recommend > ul > li:last-of-type > a {
  301.             border-top: 1px solid #E53935;
  302.         }
  304.         .recommend > ul > li > a > img {
  305.             width: 160px;
  306.             height: 165.6px;
  307.         }
  309.         .recommend > ul > li > a > h3 {
  310.             margin: 20px 0 5px 0;
  311.             color: black;
  312.             font-size: 14px;
  313.             font-weight: normal;
  314.         }
  316.         .recommend > ul > li > a > span {
  317.             font-size: 12px;
  318.             color: #b0b0b0;
  319.             margin-bottom: 15px;
  320.         }
  322.         .recommend > ul > li > a > p > span {
  323.             color: #ff6709;
  324.             font-size: 14px;
  325.         }
  327.         .recommend > ul > li > a > p > del {
  328.             margin: 5px;
  329.             color: #b0b0b0;
  330.             font-size: 14px;
  331.         }
  333.         .recommend > ul > li:first-of-type > a > img {
  334.             width: 34px;
  335.             height: 53px;
  336.             margin: 30px 0;
  337.         }
  339.         .recommend > ul > li:first-of-type > a > h3 {
  340.             font-size: 21px;
  341.             color: #ef3a3b;
  342.         }
  344.         .recommend > ul > li:first-of-type > a > span {
  345.             color: rgba(0, 0, 0, .54);
  346.             font-size: 15px;
  347.         }
  349.         .recommend > ul > li:first-of-type > a > p > span {
  350.             width: 46px;
  351.             height: 46px;
  352.             box-sizing: border-box;
  353.             background: #605751;
  354.             font-size: 24px;
  355.             color: #fff;
  356.             line-height: 46px;
  357.             padding: 6px;
  358.         }
  360.         .recommend > ul > li:first-of-type > a > p > i {
  361.             color: black;
  362.             font-size: 20px;
  363.             font-style: normal;
  364.             margin: 0 5px;
  365.         }
  367.         .footer1 {
  368.             width: 1226px;
  369.             height: 80px;
  370.             margin: 0 auto;
  371.             box-sizing: border-box;
  372.             display: flex;
  373.             justify-content: space-around;
  374.             align-items: center;
  375.             border-bottom: 1px solid #E0E0E0;
  376.         }
  378.         .footer1 > a {
  379.             color: #616161;
  380.             font-size: 16px;
  381.         }
  383.         .footer1 > a:hover {
  384.             color: #FF6E0B;
  385.         }
  387.         .footer1 > span {
  388.             color: #E0E0E0;
  389.         }
  391.         .footer2 {
  392.             width: 1226px;
  393.             height: 192px;
  394.             margin: 0 auto;
  395.             box-sizing: border-box;
  396.             display: flex;
  397.             align-items: center;
  398.         }
  400.         .footer2 > dl {
  401.             width: 160px;
  402.             height: 112px;
  403.             box-sizing: border-box;
  404.         }
  406.         .footer2 > dl > dt {
  407.             font-size: 14px;
  408.             margin: 0 0 26px 0;
  410.         }
  412.         .footer2 > dl > dd {
  413.             font-size: 12px;
  414.             margin-top: 10px;
  415.         }
  417.         .footer2 > dl > dd > a {
  418.             color: #7F7F7F;
  419.         }
  421.         .footer2 > dl > dd > a:hover {
  422.             color: #FF832F;
  423.         }
  425.         .footer2 > div {
  426.             width: 252px;
  427.             height: 112px;
  428.             box-sizing: border-box;
  429.             border-left: 1px solid #E0E0E0;
  430.             margin-left: 15px;
  431.             display: flex;
  432.             flex-flow: column nowrap;
  433.             align-items: center;
  434.         }
  436.         .footer2 > div > h3 {
  437.             font-weight: normal;
  438.             font-size: 22px;
  439.             color: #FF6700;
  440.             margin-bottom: 5px;
  441.         }
  443.         .footer2 > div > p, span {
  444.             font-size: 12px;
  445.             color: #616161;
  446.         }
  448.         .footer2 > div > span {
  449.             margin: 2px 0 16px 0;
  450.         }
  452.         .footer2 > div > button {
  453.             width: 120px;
  454.             height: 30px;
  455.             box-sizing: border-box;
  456.             border: 1px solid #FF6700;
  457.             font-size: 12px;
  458.             color: #FF6700;
  459.             background: white;
  460.             cursor: pointer;
  461.         }
  463.         .footer2 > div > button:hover {
  464.             background: #FF6700;
  465.             color: white;
  466.         }
  468.         .footer3 {
  469.             height: 248px;
  470.             background: #FAFAFA;
  471.         }
  473.         .footer3 > div {
  474.             width: 1226px;
  475.             height: 200px;
  476.             margin: 0 auto;
  477.             display: flex;
  478.             align-items: center;
  479.         }
  480.         .footer3 > div > img {
  481.             width: 57px;
  482.             height: 57px;
  483.             align-self: flex-start;
  484.             margin-top: 30px;
  485.         }
  486.         .message {
  487.             margin-left: 10px;
  488.         }
  489.         .message > div:first-of-type > a{
  490.             font-size: 12px;
  491.             color: #757575;
  492.             margin-right: 5px;
  493.         }
  494.         .message > div:first-of-type > a:hover {
  495.             color: #FF832F;
  496.         }
  497.         .message > p {
  498.             font-size: 12px;
  499.             color: #B0B0B0;
  500.             margin: 2px 0;
  501.         }
  502.         .message > div:last-of-type > img:first-of-type {
  503.             width: 83px;
  504.             height: 28px;
  505.         }
  506.     </style>
  507. </head>
  508. <body>
  509. <header>
  510.     <div class="container">
  511.         <a href="">小米商城</a>
  512.         <a href="">MIUI</a>
  513.         <a href="">IoT</a>
  514.         <a href="">云服务</a>
  515.         <a href="">金融</a>
  516.         <a href="">有品</a>
  517.         <a href="">小爱开放平台</a>
  518.         <a href="">企业团购</a>
  519.         <a href="">资历证照</a>
  520.         <a href="">协议规则</a>
  521.         <a href="">下载app</a>
  522.         <a href="">Select Location</a>
  523.         <a href="">登录</a>
  524.         <a href="">注册</a>
  525.         <a href="">消息通知</a>
  526.         <a>购物车（0）</a>
  527.     </div>
  528. </header>
  529. <nav>
  530.     <a href=""><img src="static/images/mi_logo.png" alt=""></a>
  531.     <div>
  532.         <a href="">小米手机</a>
  533.         <a href="">Redmi 红米</a>
  534.         <a href="">电视</a>
  535.         <a href="">笔记本</a>
  536.         <a href="">家电</a>
  537.         <a href="">路由器</a>
  538.         <a href="">智能硬件</a>
  539.         <a href="">服务</a>
  540.         <a href="">社区</a>
  541.     </div>
  542.     <form action="" method="get">
  543.         <input type="text" name="search" id="search">
  544.         <label for="search">搜索</label>
  545.     </form>
  546. </nav>
  547. <main>
  548.     <article>
  549.         <ul>
  550.             <li><a href="">手机 电话卡</a><span>&gt</span></li>
  551.             <li><a href="">电视 盒子</a><span>&gt</span></li>
  552.             <li><a href="">笔记本 平板</a><span>&gt</span></li>
  553.             <li><a href="">家电 插线板</a><span>&gt</span></li>
  554.             <li><a href="">出行 穿戴</a><span>&gt</span></li>
  555.             <li><a href="">智能 路由器</a><span>&gt</span></li>
  556.             <li><a href="">电源 配件</a><span>&gt</span></li>
  557.             <li><a href="">健康 儿童</a><span>&gt</span></li>
  558.             <li><a href="">耳机 音箱</a><span>&gt</span></li>
  559.             <li><a href="">生活 箱包</a><span>&gt</span></li>
  560.         </ul>
  561.         <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ecac78f468f95f59996ab7978c1de8e3.jpg?thumb=1&w=1533&h=575&f=webp&q=90"
  562.              alt="">
  563.     </article>
  564.     <article>
  565.         <div>
  566.             <ul>
  567.                 <li>
  568.                     <a href="">
  569.                         <img src="static/images/d1.png" alt="">
  570.                         <span>小米秒杀</span>
  571.                     </a>
  572.                 </li>
  573.                 <li>
  574.                     <a href="">
  575.                         <img src="static/images/d2.png" alt="">
  576.                         <span>企业团购</span>
  577.                     </a>
  578.                 </li>
  579.                 <li>
  580.                     <a href="">
  581.                         <img src="static/images/d3.png" alt="">
  582.                         <span>F码通道</span>
  583.                     </a>
  584.                 </li>
  585.             </ul>
  586.             <ul>
  587.                 <li>
  588.                     <a href="">
  589.                         <img src="static/images/d4.png" alt="">
  590.                         <span>米粉卡</span>
  591.                     </a>
  592.                 </li>
  593.                 <li>
  594.                     <a href="">
  595.                         <img src="static/images/d5.png" alt="">
  596.                         <span>以旧换新</span>
  597.                     </a>
  598.                 </li>
  599.                 <li>
  600.                     <a href="">
  601.                         <img src="static/images/d6.png" alt="">
  602.                         <span>话费充值</span>
  603.                     </a>
  604.                 </li>
  605.             </ul>
  606.         </div>
  607.         <a href=""><img src="static/images/redmi.jpg" alt=""></a>
  608.         <a href=""><img src="static/images/mi9.jpg" alt=""></a>
  609.         <a href=""><img src="static/images/huan4.jpg" alt=""></a>
  610.     </article>
  611. </main>
  612. <div class="page-main">
  613.     <div class="recommend">
  614.         <h2>小米闪购</h2>
  615.         <ul>
  616.             <li>
  617.                 <a href="">
  618.                     <h3>00:00 场</h3>
  619.                     <img src="static/images/light.png" alt="">
  620.                     <span>距离结束还有</span>
  621.                     <p><span>07</span><i>:</i><span>35</span><i>:</i><span>46</span></p>
  622.                 </a>
  623.             </li>
  624.             <li>
  625.                 <a href="">
  626.                     <img src="static/images/m1.jpg" alt="">
  627.                     <h3>小米AI音箱</h3>
  628.                     <span>听音乐、语音遥控家电</span>
  629.                     <p><span>229元</span>
  630.                         <del>299元</del>
  631.                     </p>
  632.                 </a>
  633.             </li>
  634.             <li>
  635.                 <a href="">
  636.                     <img src="static/images/m3.jpg" alt="">
  637.                     <h3>小米小爱音箱 万能遥控版 黑色</h3>
  638.                     <span>传统家电秒变智能</span>
  639.                     <p><span>99元</span>
  640.                         <del>199元</del>
  641.                     </p>
  642.                 </a>
  643.             </li>
  644.             <li>
  645.                 <a href="">
  646.                     <img src="static/images/m2.jpg" alt="">
  647.                     <h3>Redmi Note 7 6GB+64GB</h3>
  648.                     <span>4800万拍照千元机</span>
  649.                     <p><span>1049元</span>
  650.                         <del>1099元</del>
  651.                     </p>
  652.                 </a>
  653.             </li>
  654.             <li>
  655.                 <a href="">
  656.                     <img src="static/images/m4.png" alt="">
  657.                     <h3>Redmi Note 8 Pro</h3>
  658.                     <span>6400万全场景四摄</span>
  659.                     <p><span>1299元</span>
  660.                         <del>1399元</del>
  661.                     </p>
  662.                 </a>
  663.             </li>
  664.         </ul>
  665.         <img src="static/images/m5.png" alt="">
  666.     </div>
  667. </div>
  668. <footer>
  669.     <div class="footer1">
  670.         <a href="">预约维修服务</a>
  671.         <span>|</span>
  672.         <a href="">7天无理由退货</a>
  673.         <span>|</span>
  674.         <a href="">15天免费换货</a>
  675.         <span>|</span>
  676.         <a href="">满150元包邮</a>
  677.         <span>|</span>
  678.         <a href="">520余家售后网点</a>
  679.     </div>
  680.     <div class="footer2">
  681.         <dl>
  682.             <dt>帮助中心</dt>
  683.             <dd><a href="">账户管理</a></dd>
  684.             <dd><a href="">购物指南</a></dd>
  685.             <dd><a href="">订单操作</a></dd>
  686.         </dl>
  687.         <dl>
  688.             <dt>服务支持</dt>
  689.             <dd><a href="">售后政策</a></dd>
  690.             <dd><a href="">自助服务</a></dd>
  691.             <dd><a href="">相关下载</a></dd>
  692.         </dl>
  693.         <dl>
  694.             <dt>线下门店</dt>
  695.             <dd><a href="">小米之家</a></dd>
  696.             <dd><a href="">服务网点</a></dd>
  697.             <dd><a href="">授权体验店</a></dd>
  698.         </dl>
  699.         <dl>
  700.             <dt>关于小米</dt>
  701.             <dd><a href="">了解小米</a></dd>
  702.             <dd><a href="">加入小米</a></dd>
  703.             <dd><a href="">投资者关系</a></dd>
  704.         </dl>
  705.         <dl>
  706.             <dt>关注我们</dt>
  707.             <dd><a href="">新浪微博</a></dd>
  708.             <dd><a href="">官方微信</a></dd>
  709.             <dd><a href="">联系我们</a></dd>
  710.         </dl>
  711.         <dl>
  712.             <dt>特色服务</dt>
  713.             <dd><a href="">F码通道</a></dd>
  714.             <dd><a href="">礼物码</a></dd>
  715.             <dd><a href="">防伪查询</a></dd>
  716.         </dl>
  717.         <div>
  718.             <h3>400-100-5678</h3>
  719.             <p>周一至周日 8:00-18:00</p>
  720.             <span>（仅收市话费）</span>
  721.             <button>人工客服</button>
  722.         </div>
  723.     </div>
  724.     <div class="footer3">
  725.         <div>
  726.             <img src="static/images/mi_logo.png" alt="">
  727.             <div class="message">
  728.                 <div>
  729.                     <a href="">小米商城</a><span>|</span>
  730.                     <a href="">MIUI</a><span>|</span>
  731.                     <a href="">米家</a><span>|</span>
  732.                     <a href="">米聊</a><span>|</span>
  733.                     <a href="">多看</a><span>|</span>
  734.                     <a href="">游戏</a><span>|</span>
  735.                     <a href="">路由器</a><span>|</span>
  736.                     <a href="">米粉卡</a><span>|</span>
  737.                     <a href="">政企服务</a><span>|</span>
  738.                     <a href="">小米天猫店</a><span>|</span>
  739.                     <a href="">小米集团隐私</a><span>|</span>
  740.                     <a href="">小米公司儿童信息保护规则</a><span>|</span>
  741.                     <a href="">小米商城隐私政策</a><span>|</span>
  742.                     <a href="">小米商城用户协议</a><span>|</span>
  743.                     <a href="">问题反馈</a><span>|</span>
  744.                     <a href="">廉政举报</a><span>|</span>
  745.                     <a href="">诚信合规</a><span>|</span>
  746.                     <a href="">Select Location</a>
  747.                 </div>
  748.                 <p>
  749.                     © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号<br>
  750.                     （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京) -非经营性-2014-0090 营业执照 医疗器械公告<br>
  751.                     增值电信业务许可证  网络食品经营备案（京）【2018】WLSPJYBAHF-12   食品经营许可证<br>
  752.                     违法和不良信息举报电话：185-0130-1238 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
  753.                 </p>
  754.                 <div>
  755.                     <img src="static/images/fd1.png" alt="">
  756.                     <img src="static/images/fd2.png" alt="">
  757.                     <img src="static/images/fd3.png" alt="">
  758.                     <img src="static/images/fd4.png" alt="">
  759.                     <img src="static/images/fd5.png" alt="">
  760.                 </div>
  761.             </div>
  762.         </div>
  763.     </div>
  764. </footer>
  765. </body>
  766. </html>




9. 总结

通过对flex的学习，掌握了flex的全部属性，并通过实例和模仿现成网页加深了对flex的认知和理解。

上一条：CSS弹性布局仿写PHP中文网手机端首页—PHP九期下一条：1105 laravle框架下的inculde文件 与 extends模版引用 20191105 2000-2200
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多