PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布
首页
课程
路径
文章
PHP培训
精品课
下载
最新更新

博客列表 > 弹性布局之弹性容器（第六章1104作业）-PHP培训九期线上班

弹性布局之弹性容器（第六章1104作业）-PHP培训九期线上班

yany
yany 原创
2019年12月12日 21:27:56 588浏览

将源码中的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. }











上一条： MVC基础框架执行数据库CURD操作，PHP文件上传案例 - 第九期线上班 20191212 下一条： 域名是否被微信拦截，微信域名检测api接口分享
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多
热门课程