Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 弹性布局之弹性容器（第六章1104作业）-PHP培训九期线上班
Blogger Information
Blog 8
fans 0
comment 0
visits 4926
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
弹性布局之弹性容器（第六章1104作业）-PHP培训九期线上班
yany
Original
612 people have browsed it

将源码中的9个demo以及对应的CSS文件全部掌握，直到能默写出来
public.css:

  1. .container{
  2.     border: 2px dashed red;
  3.     margin:15px;
  4.     background-color: #cdc;
  5. }
  6. .item{
  7.     box-sizing: border-box;
  8.     border:1px solid;
  9.     padding: 20px;
  10.     background-color: #edc;
  11. }
  12. .flex{
  13.     display: flex;
  14.     flex-direction: row;
  15. }

demo1.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性容器的二中类型</title>
  6.     <link rel="stylesheet" href="css/style1.css"
  7. </head>
  8. <body>
  9. <h3>1、块级_弹性容器</h3>
  10. <div class="container flex">
  11.     <span class="item">item1</span>
  12.     <span class="item">item2</span>
  13.     <span class="item">item3</span>
  14. </div>
  15. <hr style="height: 3px;background-color: green;">
  16. <h3>2.行内_弹性容器</h3>
  17. <div class="container inline-flex">
  18.     <span class="item">item1</span>
  19.     <span class="item">item2</span>
  20.     <span class="item">item3</span>
  21. </div>
  23. </body>
  24. </html>

style1.css

  1. @import"public.css";
  2. .inline-flex{
  3.     display: inline-flex;
  4. }

demo2.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性容器（盒子）做导航</title>
  6.     <link rel="stylesheet" href="css/style2.css">
  7. </head>
  8. <body>
  9. <nav>
  10.     <a href="">首页</a>
  11.     <a href="">教学视频</a>
  12.     <a href="">社区问答</a>
  13.     <a href="">软件下载</a>
  14.     <a href="">联系我们</a>
  15. </nav>   
  16. </body>
  17. </html>

style2.css

  1. a{
  2.     text-decoration: none;
  3.     background-color: lightgreen;
  4.     color: black;
  5.     padding:5px 10px;
  6.     border-radius: 5px 5px 0 0;
  7. }
  8. nav{
  9.     display: flex;
  10.     border-bottom: 1px solid gray; 
  11. }
  12. a:hover,a:focus,a:active{
  13.     background-color: orangered;
  14.     color: white;
  15. }

demo3.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>定义弹性容器的主轴方向：弹性元素的主轴上的排列方向</title>
  6.     <link rel="stylesheet" href="css/style3.css"
  7. </head>
  8. <body>
  9. <h3>1、row:默认从左到右，水平排列</h3>
  10. <div class="container flex row">
  11.     <span class="item">item1</span>
  12.     <span class="item">item2</span>
  13.     <span class="item">item3</span>
  14.     <span class="item">item4</span>
  15. </div>
  16. <h3>2、row-reverse:默认从右到左，水平排列</h3>
  17. <div class="container flex row-reverse">
  18.     <span class="item">item1</span>
  19.     <span class="item">item2</span>
  20.     <span class="item">item3</span>
  21. </div>
  22. <hr style="height: 3px;background-color: green;">
  23. <h3>3、column:从上到下，垂直排列</h3>  
  24. <div class="container flex column">
  25.     <span class="item">item1</span>
  26.     <span class="item">item2</span>
  27.     <span class="item">item3</span>
  28. </div>
  29. <h3>4、column-reverse:从下到上，垂直排列</h3>
  30. <div class="container flex column-reverse">
  31.     <span class="item">item1</span>
  32.     <span class="item">item2</span>
  33.     <span class="item">item3</span>
  34. </div>
  36. </body>
  37. </html>

style3.css

  1. @import"public.css";
  2. .row{
  3.     flex-direction: row;
  4. }
  5. .row-reverse{
  6.     flex-direction: row-reverse;
  7. }
  8. .column{
  9.     flex-direction: column;
  10. }
  11. .column-reverse{
  12.     flex-direction: column-reverse;
  13. }

demo4.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>创建网址首页</title>
  6.     <link rel="stylesheet" href="css/style4.css"
  7. </head>
  8. <body>
  9. <header>
  10.     <h1>朱老师的博客</h1>
  11. </header>
  12. <nav>
  13.     <a href="">首页</a>
  14.     <a href="">教学视频</a>
  15.     <a href="">社区问答</a>
  16.     <a href="">软件下载</a>
  17.     <a href="">联系我们</a>
  18. </nav>
  19. <main>
  20.     <article>
  21.         <img src="css/1.jpeg" alt="">
  22.         <p>JavaScript是一门弱类型的动态脚本语言，支持多种编程范式，包括面向对象和函数式编程，被广泛用于web开发</p>
  23.         <button>立即学习</button>
  24.     </article>
  25.     <article>
  26.         <img src="css/1.jpeg" alt="">
  27.         <p>Vie是一套用于构建用户界面的渐进式框架，被设计为可以自底向上逐层应用</p>
  28.         <button>立即学习</button>
  29.     </article>
  30.     <article>
  31.         <img src="css/1.jpeg" alt="">
  32.         <p>Laravel是一套简洁、优雅的PHPweb开发器，它可以帮你构建一个完美的网络APP</p>
  33.         <button>立即学习</button>
  34.     </article>
  35. </main>
  36. <footer>
  37.     <p>
  38.         copyright©2018-2021中文网
  39.     </p>
  40. </footer>
  42. </body>
  43. </html>

style4.css

  1. @import"style2.css";
  2. *{
  3.     /*outline: 1px solid #ccc;
  4.     margin: 10px;*/
  5.     padding: 10px;
  6. }
  7. body,nav,main,article{
  8.     display: flex;
  9. }
  10. body,article{
  11.     flex-direction: column;
  12. }
  13. footer{
  14.     border-top: 1px solid #ccc;
  15. }
  16. nav{
  17.     padding-bottom: 0px;
  18. }

demo5.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性元素溢出与创建多行容器</title>
  6.     <link rel="stylesheet" href="css/style5.css"
  7. </head>
  8. <body>
  9. <h1>以主轴水平方向为例进行演示：</h1>
  10. <h3>1、nowrap:默认不换行，元素自动缩小填充容器</h3>
  11. <div class="container flex row nowrap">
  12.     <span class="item">item1</span>
  13.     <span class="item">item2</span>
  14.     <span class="item">item3</span>
  15.     <span class="item">item4</span>
  16.     <span class="item">item5</span>
  17.     <span class="item">item6</span> 
  18.     <span class="item">item7</span>
  20. </div>
  21. <hr style="height: 3px;background-color: green;">
  22. <h3>2、wrap:换行，弹性元素超出容器边界的换到下一行显示</h3>
  23. <div class="container flex row wrap">
  24.     <span class="item">item1</span>
  25.     <span class="item">item2</span>
  26.     <span class="item">item3</span>
  27.     <span class="item">item4</span>
  28.     <span class="item">item5</span>
  29.     <span class="item">item6</span> 
  30.     <span class="item">item7</span>
  31.     <span class="item">item8</span>
  32.     <span class="item">item9</span>
  33.     <span class="item">item10</span>
  34.     <span class="item">item11</span> 
  35. </div>  
  36. <hr style="height: 3px;background-color: green;" >
  37. <h3>3、wrap-reverse:换行，弹性元素反转排列</h3>
  38. <div class="container flex row wrap-reverse">
  39.     <span class="item">item1</span>
  40.     <span class="item">item2</span>
  41.     <span class="item">item3</span>
  42.     <span class="item">item4</span>
  43.     <span class="item">item5</span>
  44.     <span class="item">item6</span> 
  45.     <span class="item">item7</span>
  46.     <span class="item">item8</span>
  47.     <span class="item">item9</span>
  48.     <span class="item">item10</span>
  49.     <span class="item">item11</span>
  50. </div>
  51. </body>
  52. </html>

style5.css

  1. @import"public.css";
  2. .container{
  3.     width: 500px;
  4. }
  5. .nowrap{
  6.     flex-direction: row;
  7.     flex-wrap: nowrap;
  8. }
  9. .wrap{
  10.     flex-direction:row ;
  11.     flex-wrap: wrap;
  12. }
  13. .wrap-reverse{
  14.     flex-direction: row;
  15.     flex-wrap: wrap-reverse;
  16. }

demo6.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性元素溢出与创建多行容器</title>
  6.     <link rel="stylesheet" href="css/style6.css">
  7. </head>
  8. <body>
  9. <h1>以主轴水平方向为例进行演示：</h1>
  10. <h3>1、nowrap:默认不换行，元素自动缩小填充容器</h3>
  11. <div class="container flex row nowrap">
  12.     <span class="item">item1</span>
  13.     <span class="item">item2</span>
  14.     <span class="item">item3</span>
  15.     <span class="item">item4</span>
  16.     <span class="item">item5</span>
  17.     <span class="item">item6</span> 
  18.     <span class="item">item7</span>
  19. </div>
  20. <hr style="height: 3px;background-color: green;">
  21. <h3>2、wrap:换行，弹性元素超出容器边界的换到下一行显示</h3>
  22. <div class="container flex row wrap">
  23.     <span class="item">item1</span>
  24.     <span class="item">item2</span>
  25.     <span class="item">item3</span>
  26.     <span class="item">item4</span>
  27.     <span class="item">item5</span>
  28.     <span class="item">item6</span> 
  29.     <span class="item">item7</span>
  30.     <span class="item">item8</span>
  31.     <span class="item">item9</span>
  32.     <span class="item">item10</span>
  33.     <span class="item">item11</span> 
  34. </div>  
  35. <hr style="height: 3px;background-color: green;" >
  36. <h3>3、wrap-reverse:换行，弹性元素反转排列</h3>
  37. <div class="container flex row wrap-reverse">
  38.     <span class="item">item1</span>
  39.     <span class="item">item2</span>
  40.     <span class="item">item3</span>
  41.     <span class="item">item4</span>
  42.     <span class="item">item5</span>
  43.     <span class="item">item6</span> 
  44.     <span class="item">item7</span>
  45.     <span class="item">item8</span>
  46.     <span class="item">item9</span>
  47.     <span class="item">item10</span>
  48.     <span class="item">item11</span>
  49. </div>
  50. </body>
  51. </html>

style6.css

  1. @import"public.css";
  2. .container{
  3.     width: 500px;
  4. }
  5. .nowrap{
  6.     flex-flow: row nowrap;
  7. }
  8. .wrap{
  9.     flex-flow:row wrap;
  10. }
  11. .wrap-reverse{
  12.     flex-flow: row wrap-reverse;
  13. }

demo7.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性元素在主轴上如何分布</title>
  6.     <link rel="stylesheet" href="css/style7.css">
  7. </head>
  8. <body>
  9. <h1>弹性元素在主轴上如何分布</h1>
  10. <h3>1、flex-start:主轴起点开始排列</h3>
  11. <p>单行</p>
  12. <div class="container flex flex-start">
  13.     <span class="item">item1</span>
  14.     <span class="item">item2</span>
  15.     <span class="item">item3</span>
  16.     <span class="item">item4</span>
  17.     <span class="item">item5</span>
  18. </div>
  19. <p>多行</p>
  20. <div class="container flex flex-start wrap">
  21.     <span class="item">item1</span>
  22.     <span class="item">item2</span>
  23.     <span class="item">item3</span>
  24.     <span class="item">item4</span>
  25.     <span class="item">item5</span>
  26.     <span class="item">item6</span>
  27.     <span class="item">item7</span>
  28.     <span class="item">item8</span>
  29.     <span class="item">item9</span>
  30.     <span class="item">item10</span>
  31. </div>
  32. <hr style="height: 3px;background-color: green;">
  33. <h3>2、flex-end:主轴终点开始排列</h3>
  34. <p>单行</p>
  35. <div class="container flex flex-end">
  36.     <span class="item">item1</span>
  37.     <span class="item">item2</span>
  38.     <span class="item">item3</span>
  39.     <span class="item">item4</span>
  40.     <span class="item">item5</span>
  41. </div>
  42. <p>多行</p>
  43. <div class="container flex flex-end wrap">
  44.     <span class="item">item1</span>
  45.     <span class="item">item2</span>
  46.     <span class="item">item3</span>
  47.     <span class="item">item4</span>
  48.     <span class="item">item5</span>
  49.     <span class="item">item6</span>
  50.     <span class="item">item7</span>
  51.     <span class="item">item8</span>
  52.     <span class="item">item9</span>
  53.     <span class="item">item10</span>
  54. </div>
  55. <hr style="height: 3px;background-color: green;">
  56. <h3>3、center:弹性元素作为一个整体居中显示</h3>
  57. <p>单行</p>
  58. <div class="container flex center">
  59.     <span class="item">item1</span>
  60.     <span class="item">item2</span>
  61.     <span class="item">item3</span>
  62.     <span class="item">item4</span>
  63.     <span class="item">item5</span>
  64. </div>
  65. <p>多行</p>
  66. <div class="container flex center wrap">
  67.     <span class="item">item1</span>
  68.     <span class="item">item2</span>
  69.     <span class="item">item3</span>
  70.     <span class="item">item4</span>
  71.     <span class="item">item5</span>
  72.     <span class="item">item6</span>
  73.     <span class="item">item7</span>
  74.     <span class="item">item8</span>
  75.     <span class="item">item9</span>
  76.     <span class="item">item10</span>
  77. </div>
  78. <hr style="height: 3px;background-color: green;">
  79. <h3>4、space-between:首尾元素紧贴起点，其他元素平分剩余空间</h3>
  80. <p>单行</p>
  81. <div class="container flex space-between">
  82.     <span class="item">item1</span>
  83.     <span class="item">item2</span>
  84.     <span class="item">item3</span>
  85.     <span class="item">item4</span>
  86.     <span class="item">item5</span>
  87. </div>
  88. <p>多行</p>
  89. <div class="container flex space-between wrap">
  90.     <span class="item">item1</span>
  91.     <span class="item">item2</span>
  92.     <span class="item">item3</span>
  93.     <span class="item">item4</span>
  94.     <span class="item">item5</span>
  95.     <span class="item">item6</span>
  96.     <span class="item">item7</span>
  97.     <span class="item">item8</span>
  98.     <span class="item">item9</span>
  99.     <span class="item">item10</span>
  100. </div>
  101. <hr style="height: 3px;background-color: green;">
  102. <h3>5、space-around:每个元素二边空间相等，相邻元素空间累加</h3>
  103. <p>单行</p>
  104. <div class="container flex space-around">
  105.     <span class="item">item1</span>
  106.     <span class="item">item2</span>
  107.     <span class="item">item3</span>
  108.     <span class="item">item4</span>
  109.     <span class="item">item5</span>
  110. </div>
  111. <p>多行</p>
  112. <div class="container flex space-around wrap">
  113.     <span class="item">item1</span>
  114.     <span class="item">item2</span>
  115.     <span class="item">item3</span>
  116.     <span class="item">item4</span>
  117.     <span class="item">item5</span>
  118.     <span class="item">item6</span>
  119.     <span class="item">item7</span>
  120.     <span class="item">item8</span>
  121.     <span class="item">item9</span>
  122.     <span class="item">item10</span>
  123. </div>
  124. <hr style="height: 3px;background-color: green;">
  125. <h3>6、space-evenly:每个元素，以及元素列与起点的空间全部相等</h3>
  126. <p>单行</p>
  127. <div class="container flex space-evenly">
  128.     <span class="item">item1</span>
  129.     <span class="item">item2</span>
  130.     <span class="item">item3</span>
  131.     <span class="item">item4</span>
  132.     <span class="item">item5</span>
  133. </div>
  134. <p>多行</p>
  135. <div class="container flex space-evenly wrap">
  136.     <span class="item">item1</span>
  137.     <span class="item">item2</span>
  138.     <span class="item">item3</span>
  139.     <span class="item">item4</span>
  140.     <span class="item">item5</span>
  141.     <span class="item">item6</span>
  142.     <span class="item">item7</span>
  143.     <span class="item">item8</span>
  144.     <span class="item">item9</span>
  145.     <span class="item">item10</span>
  146.     <span class="item">item11</span>
  147. </div>  
  148. </body>
  149. </html>

style7.css

  1. @import"public.css";
  2. .container{
  3.     width: 500px;
  4. }
  5. .wrap{
  6.     flex-wrap: wrap;
  7. }
  8. .flex-start{
  9.     justify-content: flex-start;
  10. }
  11. .flex-end{
  12.     justify-content: flex-end;
  14. }
  15. .center{
  16.     justify-content: center;
  17. }
  18. .space-between{
  19.     justify-content: space-between;
  20. }
  21. .space-around{
  22.     justify-content: space-around;
  23. }
  24. .space-evenly{
  25.     justify-content: space-evenly;
  26. }

demo8.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>使用弹性元素主轴对齐来改写导航</title>
  6.     <link rel="stylesheet" href="css/style8.css"
  7. </head>
  8. <body>
  9. <nav>
  10.     <a href="">首页</a>
  11.     <a href="">教学视频</a>
  12.     <a href="">社区问答</a>
  13.     <a href="">软件下载</a>
  14.     <a href="">联系我们</a>
  15. </nav>
  16. </body>
  17. </html>

style8.css

  1. a{
  2.     text-decoration: none;
  3.     background-color: lightgreen;
  4.     color: black;
  5.     padding:5px 10px;
  6.     margin: 0 5px;
  7.     border-radius: 5px 5px 0 0;
  8. }
  9. nav{
  10.     display: flex;
  11.     border-bottom:1px solid gray ;
  12. }
  13. a:hover,a:focus,a:active{
  14.     background-color: orangered;
  15.     color: white;
  16. }
  17. nav{
  18.     justify-content: flex-start;
  19. }
  20. nav{
  21.     justify-content: flex-end;
  22. }
  23. nav{
  24.     justify-content: center;
  25. }

demo9.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性元素在垂直方向（交叉轴）上的对齐方式</title>
  6.     <link rel="stylesheet" href="css/style9.css"
  7. </head>
  8. <body>
  9. <h1>弹性元素在垂直轴上分布方式：</h1>
  10. <h3>1、stretch:默认值，元素高度自动拉伸充满整个容器</h3>
  11. <p>单行容器</p>
  12. <div class="container flex stretch">
  13.     <span class="item">item1</span>
  14.     <span class="item">item2</span>
  15.     <span class="item">item3</span>
  16.     <span class="item">item4</span>
  17.     <span class="item">item5</span>
  18.     <span class="item">item6</span>
  19. </div>
  20. <p>多行容器</p>
  21. <div  class="container flex wrap stretch-wrap">
  22.     <span class="item">item1</span>
  23.     <span class="item">item2</span>
  24.     <span class="item">item3</span>
  25.     <span class="item">item4</span>
  26.     <span class="item">item5</span>
  27.     <span class="item">item6</span>
  28. </div>
  29. <hr style="height: 3px;background-color: green;">
  30. <h3>2、flex-start:元素紧贴容器起点</h3>
  31. <p>单行容器</p>
  32. <div class="container flex flex-start">
  33.     <span class="item">item1</span>
  34.     <span class="item">item2</span>
  35.     <span class="item">item3</span>
  36.     <span class="item">item4</span>
  37.     <span class="item">item5</span>
  38.     <span class="item">item6</span>
  39. </div>
  40. <p>多行容器</p>
  41. <div  class="container flex wrap wrap-flex-start">
  42.     <span class="item">item1</span>
  43.     <span class="item">item2</span>
  44.     <span class="item">item3</span>
  45.     <span class="item">item4</span>
  46.     <span class="item">item5</span>
  47.     <span class="item">item6</span>
  48. </div>
  49. <hr style="height: 3px;background-color: green;">
  50. <h3>3、flex-end:元素紧贴容器终点</h3>
  51. <p>单行容器</p>
  52. <div class="container flex flex-end">
  53.     <span class="item">item1</span>
  54.     <span class="item">item2</span>
  55.     <span class="item">item3</span>
  56.     <span class="item">item4</span>
  57.     <span class="item">item5</span>
  58.     <span class="item">item6</span>
  59. </div>
  60. <p>多行容器</p>
  61. <div  class="container flex wrap wrap-flex-end">
  62.     <span class="item">item1</span>
  63.     <span class="item">item2</span>
  64.     <span class="item">item3</span>
  65.     <span class="item">item4</span>
  66.     <span class="item">item5</span>
  67.     <span class="item">item6</span>
  68. </div>
  69. <hr style="height: 3px;background-color: green;">
  70. <h3>4、center：所有元素作为一个整体在容器垂直方向居中显示</h3>
  71. <p>单行容器</p>
  72. <div class="container flex center">
  73.     <span class="item">item1</span>
  74.     <span class="item">item2</span>
  75.     <span class="item">item3</span>
  76.     <span class="item">item4</span>
  77.     <span class="item">item5</span>
  78.     <span class="item">item6</span>
  79. </div>
  80. <p>多行容器</p>
  81. <div  class="container flex wrap wrap-center">
  82.     <span class="item">item1</span>
  83.     <span class="item">item2</span>
  84.     <span class="item">item3</span>
  85.     <span class="item">item4</span>
  86.     <span class="item">item5</span>
  87.     <span class="item">item6</span>
  88. </div>
  89. <hr style="height: 3px;background-color: green;">
  90. <h3>5、spacebetween:垂直方向首尾行紧贴起止点，其他行平分剩余空间</h3>
  91. <p>多行容器</p>
  92. <div  class="container flex wrap wrap-space-between">
  93.     <span class="item">item1</span>
  94.     <span class="item">item2</span>
  95.     <span class="item">item3</span>
  96.     <span class="item">item4</span>
  97.     <span class="item">item5</span>
  98.     <span class="item">item6</span>
  99. </div>
  100. <hr style="height: 3px;background-color: green;">
  101. <h3>6、space-around:每个元素二边空间相等，相邻元素空间累加</h3>
  102. <p>多行容器</p>
  103. <div  class="container flex wrap wrap-space-around">
  104.     <span class="item">item1</span>
  105.     <span class="item">item2</span>
  106.     <span class="item">item3</span>
  107.     <span class="item">item4</span>
  108.     <span class="item">item5</span>
  109.     <span class="item">item6</span>
  110. </div>
  111. <hr style="height: 3px;background-color: green;">
  112. <h3>7、space-evenly:每个元素，以及元素到与起点的空间全部相等</h3>
  113. <p>多行容器</p>
  114. <div  class="container flex wrap wrap-space-evenly">
  115.     <span class="item">item1</span>
  116.     <span class="item">item2</span>
  117.     <span class="item">item3</span>
  118.     <span class="item">item4</span>
  119.     <span class="item">item5</span>
  120.     <span class="item">item6</span>
  121. </div>
  122. </body>
  123. </html>

style9.css

  1. @import"public.css";
  2. .container{
  3.     width: 500px;
  4.     height:300px
  5. }
  6. .wrap{
  7.     flex-wrap: wrap;
  8. }
  9. .stretch{
  10.     align-items: stretch;
  11. }
  12. .wrap-stretch{
  13.     align-content: stretch;
  14. }
  15. .flex-start{
  16.     align-items: flex-start;
  17. }
  18. .wrap-flex-start{
  19.     align-content:flex-start;
  20. }
  21. .flex-end{
  22.     align-items: flex-end;
  23. }
  24. .wrap-flex-end{
  25.     align-content:flex-end;
  26. }
  27. .center{
  28.     align-items: center;
  29. }
  30. .wrap-center{
  31.     align-content:center;
  32. }
  33. .wrap-space-between{
  34.     align-content:space-between;
  35. }
  36. .wrap-space-around{
  37.     align-content:space-around;
  38. }
  39. .wrap-space-evenly{
  40.     align-content:space-evenly;
  41. }











Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：电脑不错, 是macbook pro 2015, 与我同款... 一定要好好学, 对得起这么好的电脑.... 作业完成很认真, 这些案例, 希望印在脑海中...
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post