简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >弹性盒布局之弹性容器

弹性盒布局之弹性容器

遗忘了寂寞
遗忘了寂寞原创
2019年11月05日 19:27:581380浏览

弹性容器:弹性容器:

弹性容器分为二种:
display: flex: 块级弹性容器
display: inline-flex: 行内块级弹性容器
弹性容器常用属性
1、弹性元素在主轴上排列方向：flex-direction
flex-direction:row(默认) 水平方向，从左到右排列
flex-direction:row-reverse水平方向，从右到左排列
flex-direction:columne垂直方向，从上到下排列
flex-direction:column-reverse垂直方向，从下到上排列
2、弹性元素在主轴上是否换行：flex-wrap
flex-wrap:norap(默认) 不换行
flex-wrap:wrap换行
flex-wrap:wrap-reverse换行，反向排列
3、flex-direction 和 flex-wrap 属性的复合属性：flex-flow
4、弹性元素在垂直轴上的对齐方式与空间分布：justify-content
justify-content:flex-start默认值。元素位于容器的开头
justify-content:flex-end元素位于容器的结尾。
justify-content:center元素位于容器的中心。
justify-content:space-between首尾元素紧贴起点和终点，基它元素平均分配
justify-content:space-around两端保留元素之间间距的一半
justify-content:space-evenly元素之间及元素与边界之间的间距相同
5、定义弹性元素（单行容器）在垂直轴上的对齐方式：align-items
align-items:stretch默认值。元素被拉伸以适应容器。
align-items:flex-start元素位于容器的起点
align-items:flex-end元素位于容器的终点
align-items:center元素位于容器的中心
6、定义多行容器中弹性元素在垂直轴上的对齐方式与空间分配：align-content
align-content:stretch默认值。元素被拉伸以适应容器。
align-content:flex-start元素位于容器的起点
align-content:flex-end元素位于容器的终点
align-content:center元素位于容器的中心
align-content:space-between垂直方向，首尾元素紧贴起点和终点，基它元素平均分配
align-content:space-around垂直方向，两端保留元素之间间距的一半
align-content:space-evenly垂直方向，元素之间及元素与边界之间的间距相同

弹性容器的二种类型

  1. /*块级弹性容器*/
  2. .flex {    display: flex;}
  3. /*行内/内联弹性盒子*/
  4. .inline-flex {display: inline-flex;}

弹性容器(盒子)做导航

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>弹性容器(盒子)做导航</title>
  6.         <style type="text/css">
  7.             a {padding: 5px 10px;margin: 0 5px;border-radius: 5px 5px 0 0;text-decoration-line: none;background-color: lightgreen;box-shadow: 2px 0 1px #888;color: black;}
  8.             a:hover,a:focus,a:active {background-color: orangered;color: white;}
  9.             nav {display: flex;border-bottom: 1px solid gray;}
  10.         </style>
  11.     </head>
  12.     <body>
  13.         <nav>
  14.             <a href="">首页</a>
  15.             <a href="">教学视频</a>
  16.             <a href="">社区问答</a>
  17.             <a href="">软件下载</a>
  18.             <a href="">联系我们</a>
  19.         </nav>
  20.     </body>
  21. </html>

弹性元素的主轴上的排列方向

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>定义弹性容器的主轴方向: 弹性元素的主轴上的排列方向</title>
  6.     <style type="text/css">
  7.         .container {border: 2px dashed red;margin: 15px;background: #cdc;}
  8.         .item {box-sizing: border-box;border: 1px solid;padding: 20px;background: #ede;}
  9.         .flex {display: flex;}
  10.         .row {flex-direction: row;}
  11.         .row-reverse {flex-direction: row-reverse;}
  12.         .column {flex-direction: column;}
  13.         .column-reverse {flex-direction: column-reverse;}
  14.     </style>
  15. </head>
  16. <body>
  17. <h3>1. row: 默认从左向右,水平排列</h3>
  18. <div class="container flex row">
  19.     <span class="item">item1</span>
  20.     <span class="item">item2</span>
  21.     <span class="item">item3</span>
  22. </div>
  24. <h3>2. row: 从右向左,水平排列</h3>
  25. <div class="container flex row-reverse">
  26.     <span class="item">item1</span>
  27.     <span class="item">item2</span>
  28.     <span class="item">item3</span>
  29. </div>
  31. <h3>3. column: 从下向下,垂直排列</h3>
  32. <div class="container flex column">
  33.     <span class="item">item1</span>
  34.     <span class="item">item2</span>
  35.     <span class="item">item3</span>>
  36. </div>
  38. <h3>4. column-reverse: 从下向上,垂直排列</h3>
  39. <div class="container flex column-reverse">
  40.     <span class="item">item1</span>
  41.     <span class="item">item2</span>
  42.     <span class="item">item3</span>
  43. </div>
  44. </body>
  45. </html>

创建网站首页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>创建网站首页</title>
  6.     <style type="text/css">
  7.         a {padding: 5px 10px;margin: 0 5px;border-radius: 5px 5px 0 0;text-decoration-line: none;background-color: lightgreen;box-shadow: 2px 0 1px #888;color: black;}
  8.         a:hover,a:focus,a:active {background-color: orangered;color: white;}
  9.         nav {display: flex;border-bottom: 1px solid gray;}
  10.         * {margin: 10px;padding: 10px;}
  11.         /*将页面中主要布局元素全部转为弹性容器*/
  12.         body, nav, main, article {display: flex;}
  13.         /*设置全局, 内容区主轴垂直, 元素沿主轴排列*/
  14.         body, article {flex-direction: column;}
  15.         /*页脚添加上边框*/
  16.         footer {border-top: 1px solid #ccc;}
  17.         /*导航删除下内边距*/
  18.         nav {padding-bottom: 0;}
  19.     </style>
  20. </head>
  21. <body>
  22. <header>
  23.     <h1>某人的博客</h1>
  24. </header>
  25. <nav>
  26.     <a href="">首页</a>
  27.     <a href="">教学视频</a>
  28.     <a href="">社区问答</a>
  29.     <a href="">软件下载</a>
  30.     <a href="">联系我们</a>
  31. </nav>
  32. <main>
  33.     <article>
  34.         <img src="images/2.jpg" alt="">
  35.         <p>JavaScript 是一门弱类型的动态脚本语言，支持多种编程范式，包括面向对象和函数式编程，被广泛用于 Web 开发。</p>
  36.         <button>立即学习</button>
  37.     </article>
  38.     <article>
  39.         <img src="images/1.jpg" alt="">
  40.         <p>Vue是一套用于构建用户界面的渐进式框架, 被设计为可以自底向上逐层应用。</p>
  41.         <button>立即学习</button>
  42.     </article>
  43.     <article>
  44.         <img src="images/3.jpg" alt="">
  45.         <p>Laravel是一套简洁,优雅的PHP Web开发框架, 它可以帮你构建一个完美的网络APP</p>
  46.         <button>立即学习</button>
  47.     </article>
  48. </main>
  49. <footer>
  50.     <p>Copyright © 2018 -2021 php中文网</p>
  51. </footer>
  52. </body>
  53. </html>

弹性元素溢出与创建多行容器弹性元素溢出与创建多行容器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性元素溢出与创建多行容器</title>
  6.     <style type="text/css">
  7.         .container {border: 2px dashed red;margin: 15px;background: #cdc;}
  8.         .item {box-sizing: border-box;border: 1px solid;padding: 20px;background: #ede;}
  9.         .flex {display: flex;}
  10.         .container {width: 500px;} 
  11.         .nowrap {flex-direction: row;flex-wrap: nowrap;}
  12.         .wrap {flex-direction: row;flex-wrap: wrap;}
  13.         .wrap-reverse {flex-direction: row;flex-wrap: wrap-reverse;}
  14.     </style>
  15. </head>
  16. <body>
  17. <h1>以主轴水平方向为例演示:</h1>
  18. <h3>1. nowrap: 默认不换行,元素自动缩小适应容器</h3>
  19. <div class="container flex row nowrap">
  20.     <span class="item">item1</span>
  21.     <span class="item">item2</span>
  22.     <span class="item">item3</span>
  23.     <span class="item">item4</span>
  24.     <span class="item">item5</span>
  25.     <span class="item">item6</span>
  26.     <span class="item">item7</span>
  27.     <span class="item">item8</span>
  28.     <span class="item">item9</span>
  29.     <span class="item">item10</span>
  30.     <span class="item">item11</span>
  31. </div>
  33. <h3>2. wrap: 换行,元素超出容器边界后换到下一行继续显示</h3>
  34. <div class="container flex row wrap">
  35.     <span class="item">item1</span>
  36.     <span class="item">item2</span>
  37.     <span class="item">item3</span>
  38.     <span class="item">item4</span>
  39.     <span class="item">item5</span>
  40.     <span class="item">item6</span>
  41.     <span class="item">item7</span>
  42.     <span class="item">item8</span>
  43.     <span class="item">item9</span>
  44.     <span class="item">item10</span>
  45.     <span class="item">item11</span>
  46. </div>
  48. <h3>3. wrap-reverse: 换行后,弹性元素在垂直方向反向排列</h3>
  49. <div class="container flex row wrap-reverse">
  50.     <span class="item">item1</span>
  51.     <span class="item">item2</span>
  52.     <span class="item">item3</span>
  53.     <span class="item">item4</span>
  54.     <span class="item">item5</span>
  55.     <span class="item">item6</span>
  56.     <span class="item">item7</span>
  57.     <span class="item">item8</span>
  58.     <span class="item">item9</span>
  59.     <span class="item">item10</span>
  60.     <span class="item">item11</span>
  61. </div>
  63. </body>
  64. </html>

弹性元素流体布局(简称:弹性流)的简化弹性元素流体布局(简称:弹性流)的简化

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性元素流体布局(简称:弹性流)的简化</title>
  6.     <style type="text/css">
  7.         .container {border: 2px dashed red;margin: 15px;background: #cdc;}
  8.         .item {box-sizing: border-box;border: 1px solid;padding: 20px;background: #ede;}
  9.         .flex {display: flex;}
  10.         /*默认*/
  11.         .container {width: 500px;}
  12.         /*不换行*/
  13.         .nowrap {flex-flow: row nowrap;}
  14.          /*换行*/
  15.         .wrap {flex-flow: row wrap;}
  16.          .wrap-reverse {flex-flow: row wrap-reverse;}
  17.     </style>
  18. </head>
  19. <body>
  20. <h1>弹性流布局的简写语法演示:</h1>
  21. <h3>1. nowrap: 默认不换行,元素自动缩小适应容器</h3>
  22. <div class="container flex row nowrap">
  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>
  36. <h3>2. wrap: 换行,元素超出容器边界后换到下一行继续显示</h3>
  37. <div class="container flex row wrap">
  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>
  51. <h3>3. wrap-reverse: 换行后,弹性元素在垂直方向反转排列</h3>
  52. <div class="container flex row wrap-reverse">
  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.     <span class="item">item7</span>
  60.     <span class="item">item8</span>
  61.     <span class="item">item9</span>
  62.     <span class="item">item10</span>
  63.     <span class="item">item11</span>
  64. </div>
  66. </body>
  67. </html>

弹性元素在主轴上如何分布

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性元素在主轴上如何分布</title>
  6.     <style type="text/css">
  7.         .container {border: 2px dashed red;margin: 15px;background: #cdc;}
  8.         .item {box-sizing: border-box;border: 1px solid;padding: 20px;background: #ede;}
  9.         .flex {display: flex;}
  11.         .container {width: 550px;}
  12.         /*允许换行*/
  13.         .wrap {flex-wrap: wrap;}
  15.         .flex-start {justify-content: flex-start;}
  16.         .flex-end {justify-content: flex-end;}
  17.          .center {justify-content: center;}
  18.         .space-between {justify-content: space-between;}
  19.         .space-around {justify-content: space-around;}
  20.         .space-evenly {justify-content: space-evenly;}
  22.     </style>
  23. </head>
  24. <body>
  25. <h1>弹性元素在主轴上如何分布:</h1>
  26. <h3>1. flex-start: 主轴起点开始水平排列</h3>
  27. <p>单行</p>
  28. <div class="container flex flex-start">
  29.     <span class="item">弹性元素 1</span>
  30.     <span class="item">弹性元素 2</span>
  31.     <span class="item">弹性元素 3</span>
  32. </div>
  33. <p>多行</p>
  34. <div class="container flex flex-start wrap">
  35.     <span class="item">弹性元素 1</span>
  36.     <span class="item">弹性元素 2</span>
  37.     <span class="item">弹性元素 3</span>
  38.     <span class="item">弹性元素 4</span>
  39.     <span class="item">弹性元素 5</span>
  40.     <span class="item">弹性元素 6</span>
  41. </div>
  43. <hr style="height: 3px; background:green;">
  45. <h3>2. flex-end: 主轴终点开始水平排列</h3>
  46. <p>单行</p>
  47. <div class="container flex flex-end">
  48.     <span class="item">弹性元素 1</span>
  49.     <span class="item">弹性元素 2</span>
  50.     <span class="item">弹性元素 3</span>
  51. </div>
  52. <p>多行</p>
  53. <div class="container flex flex-end wrap">
  54.     <span class="item">弹性元素 1</span>
  55.     <span class="item">弹性元素 2</span>
  56.     <span class="item">弹性元素 3</span>
  57.     <span class="item">弹性元素 4</span>
  58.     <span class="item">弹性元素 5</span>
  59.     <span class="item">弹性元素 6</span>
  60. </div>
  62. <hr style="height: 3px; background:green;">
  64. <h3>3. center: 将所有弹性元素视为整体,居中显示</h3>
  65. <p>单行</p>
  66. <div class="container flex center">
  67.     <span class="item">item1</span>
  68.     <span class="item">item2</span>
  69.     <span class="item">item3</span>
  70. </div>
  71. <p>多行</p>
  72. <div class="container flex center wrap">
  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>
  81. <hr style="height: 3px; background:green;">
  83. <h3>4. space-between: 首尾元素紧贴起止点,其它元素平分剩余空间</h3>
  84. <p>单行</p>
  85. <div class="container flex space-between">
  86.     <span class="item">item1</span>
  87.     <span class="item">item2</span>
  88.     <span class="item">item3</span>
  89. </div>
  90. <p>多行</p>
  91. <div class="container flex space-between wrap">
  92.     <span class="item">item1</span>
  93.     <span class="item">item2</span>
  94.     <span class="item">item3</span>
  95.     <span class="item">item4</span>
  96.     <span class="item">item5</span>
  97.     <span class="item">item6</span>
  98. </div>
  100. <hr style="height: 3px; background: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. </div>
  109. <p>多行</p>
  110. <div class="container flex space-around wrap">
  111.     <span class="item">item1</span>
  112.     <span class="item">item2</span>
  113.     <span class="item">item3</span>
  114.     <span class="item">item4</span>
  115.     <span class="item">item5</span>
  116.     <span class="item">item6</span>
  117. </div>
  119. <hr style="height: 3px; background:green;">
  121. <h3>6. space-evenly: 每个元素, 以及元素到与起止点的空间全部相等</h3>
  122. <p>单行</p>
  123. <div class="container flex space-evenly">
  124.     <span class="item">item1</span>
  125.     <span class="item">item2</span>
  126.     <span class="item">item3</span>
  127. </div>
  128. <p>多行</p>
  129. <div class="container flex space-evenly wrap">
  130.     <span class="item">item1</span>
  131.     <span class="item">item2</span>
  132.     <span class="item">item3</span>
  133.     <span class="item">item4</span>
  134.     <span class="item">item5</span>
  135.     <span class="item">item6</span>
  136. </div>
  137. </body>
  138. </html>



弹性元素在垂直方向(交叉轴)上的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>弹性元素在垂直方向(交叉轴)上的对齐方式</title>
  6.     <style type="text/css">
  7.         .container {border: 2px dashed red;margin: 15px;background: #cdc;}
  8.         .item {box-sizing: border-box;border: 1px solid;padding: 20px;background: #ede;}
  9.         .flex {display: flex;}
  11.         .container {width: 550px;height: 300px;}
  12.         /*允许换行*/
  13.         .wrap {flex-wrap: wrap;}
  14.         /************ 单行容器 ************/
  15.         .stretch {align-items: stretch;}
  16.         .flex-start {align-items: flex-start;}
  17.         .flex-end {align-items: flex-end;}
  18.         .center {align-items: center;}
  19.         /************ 多行容器 ************/
  20.         .wrap-stretch {align-content: stretch;}
  21.         .wrap-flex-start {align-content: flex-start;}
  22.         .wrap-flex-end {align-content: flex-end;}
  23.         .wrap-center {align-content: center;}
  24.         .wrap-space-between {align-content: space-between;}
  25.         .wrap-space-around {align-content: space-around;}
  26.         .wrap-space-evenly {align-content: space-evenly;}
  27.         .all-align {justify-content: space-around;align-content: space-around;}
  29.     </style>
  30. </head>
  31. <body>
  32. <h1>弹性元素在垂直轴上分布方式:</h1>
  33. <h3>1. stretch: 默认值, 元素高度自动拉伸充满整个容器</h3>
  34. <p>单行容器:</p>
  35. <div class="container flex stretch">
  36.     <span class="item">item1</span>
  37.     <span class="item">item2</span>
  38.     <span class="item">item3</span>
  39. </div>
  40. <p>多行容器:</p>
  41. <div class="container flex wrap wrap-stretch">
  43.     <span class="item">item1</span>
  44.     <span class="item">item2</span>
  45.     <span class="item">item3</span>
  46.     <span class="item">item4</span>
  47.     <span class="item">item5</span>
  48.     <span class="item">item6</span>
  49. </div>
  51. <hr style="height: 3px; background:green;">
  53. <h3>2. flex-start: 元素紧贴容器起点</h3>
  54. <p>单行容器:</p>
  55. <div class="container flex flex-start">
  56.     <span class="item">item1</span>
  57.     <span class="item">item2</span>
  58.     <span class="item">item3</span>
  59. </div>
  60. <p>多行容器:</p>
  61. <div class="container flex wrap wrap-flex-start">
  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>
  70. <hr style="height: 3px; background:green;">
  72. <h3>3. flex-end: 元素紧贴容器终点</h3>
  73. <p>单行容器:</p>
  74. <div class="container flex flex-end">
  75.     <span class="item">item1</span>
  76.     <span class="item">item2</span>
  77.     <span class="item">item3</span>
  78. </div>
  79. <p>多行容器:</p>
  80. <div class="container flex wrap wrap-flex-end">
  81.     <span class="item">item1</span>
  82.     <span class="item">item2</span>
  83.     <span class="item">item3</span>
  84.     <span class="item">item4</span>
  85.     <span class="item">item5</span>
  86.     <span class="item">item6</span>
  87. </div>
  89. <hr style="height: 3px; background:green;">
  91. <h3>4. center: 元素中点与垂直轴中点对齐, 居中显示</h3>
  92. <p>单行容器:</p>
  93. <div class="container flex center">
  94.     <span class="item">item1</span>
  95.     <span class="item">item2</span>
  96.     <span class="item">item3</span>
  97. </div>
  98. <p>多行容器:</p>
  99. <div class="container flex wrap wrap-center">
  100.     <span class="item">item1</span>
  101.     <span class="item">item2</span>
  102.     <span class="item">item3</span>
  103.     <span class="item">item4</span>
  104.     <span class="item">item5</span>
  105.     <span class="item">item6</span>
  106. </div>
  108. <hr style="height: 3px; background:green;">
  110. <h3>5. 垂直方向首尾行紧贴起止点,其它行平分剩余空间</h3>
  111. <div class="container flex wrap wrap-space-between">
  112.     <span class="item">item1</span>
  113.     <span class="item">item2</span>
  114.     <span class="item">item3</span>
  115.     <span class="item">item4</span>
  116.     <span class="item">item5</span>
  117.     <span class="item">item6</span>
  118.     <span class="item">item7</span>
  119.     <span class="item">item8</span>
  120.     <span class="item">item9</span>
  121.     <span class="item">item10</span>
  122. </div>
  124. <hr style="height: 3px; background:green;">
  126. <h3>6. 每个元素二边空间相等,相邻元素空间累加</h3>
  127. <div class="container flex wrap wrap-space-around">
  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.     <span class="item">item6</span>
  134.     <span class="item">item7</span>
  135.     <span class="item">item8</span>
  136.     <span class="item">item9</span>
  137.     <span class="item">item10</span>
  138. </div>
  140. <hr style="height: 3px; background:green;">
  142. <h3>7. 每个元素, 以及元素到与起止点的空间全部相等</h3>
  143. <div class="container flex wrap wrap-space-evenly">
  144.     <span class="item">item1</span>
  145.     <span class="item">item2</span>
  146.     <span class="item">item3</span>
  147.     <span class="item">item4</span>
  148.     <span class="item">item5</span>
  149.     <span class="item">item6</span>
  150.     <span class="item">item7</span>
  151.     <span class="item">item8</span>
  152.     <span class="item">item9</span>
  153.     <span class="item">item10</span>
  154. </div>
  156. <hr style="height: 3px; background:green;">
  158. <h3>8. 结合主轴, 实现空间全部平均分配</h3>
  159. <div class="container flex wrap wrap-space-evenly all-align">
  160.     <span class="item">item1</span>
  161.     <span class="item">item2</span>
  162.     <span class="item">item3</span>
  163.     <span class="item">item4</span>
  164.     <span class="item">item5</span>
  165.     <span class="item">item6</span>
  166.     <span class="item">item7</span>
  167.     <span class="item">item8</span>
  168.     <span class="item">item9</span>
  169.     <span class="item">item10</span>
  170. </div>
  171. </body>
  172. </html>









上一条：弹性盒子（flex）下一条：第六课：弹性盒布局弹性容器的解析
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多