search

博客列表 >弹性布局之弹性容器-PHP九期线上班

弹性布局之弹性容器-PHP九期线上班

老袁
老袁原创
2019年11月05日 14:56:57455浏览

给全局定义的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: #ede;
  11. }
  12. .flex {
  13.     display: flex;
  14.     flex-direction: row;
  15. }

弹性容器的两种类型

  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. <div class="container flex">
  16.     <span class="item">item1</span>
  17.     <span class="item">item2</span>
  18.     <span class="item">item3</span>
  19. </div>
  21. <hr style="height: 3px; background-color:green;">
  23. <h3>2. 行内弹性容器</h3>
  24. <div class="container inline-flex">
  25.     <span class="item">item1</span>
  26.     <span class="item">item2</span>
  27.     <span class="item">item3</span>
  28. </div>
  29. <div class="container inline-flex">
  30.     <span class="item">item1</span>
  31.     <span class="item">item2</span>
  32.     <span class="item">item3</span>
  33. </div>
  34. </body>
  35. </html>
  37. CSS:
  38. @import "public.css";
  40. .inline-flex {
  41.     display: inline-flex;
  42. }


弹性容器(盒子)做导航

  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>
  19. CSS:
  20. a {
  21.     text-decoration: none;
  22.     background-color: lightgreen;
  23.     color: black;
  24.     padding: 5px 10px;
  25.     margin: 0 5px;
  26.     border-radius: 5px 5px 0 0;
  27. }
  29. nav {
  30.     display: flex;
  31.     border-bottom: 1px solid gray;
  32. }
  34. a:hover, a:focus, a:active {
  35.     background-color: orangered;
  36.     color: white;
  37. }


定义弹性容器的主轴方向: 弹性元素的主轴上的排列方向

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <link rel="stylesheet" href="css/style3.css">
  6.     <title>定义弹性容器的主轴方向: 弹性元素的主轴上的排列方向</title>
  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. </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>
  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>
  30. <h3>4. column-reverse: 从下到上, 垂直排列</h3>
  31. <div class="container flex column-reverse">
  32.     <span class="item">item1</span>
  33.     <span class="item">item2</span>
  34.     <span class="item">item3</span>
  35. </div>
  36. </body>
  37. </html>
  39. @import "public.css";
  41. .row {
  42.    flex-direction: row;
  43. }
  45. .row-reverse {
  46.     flex-direction: row-reverse;
  47. }
  49. .column {
  50.     flex-direction: column;
  51. }
  53. .column-reverse {
  54.     flex-direction: column-reverse;
  55. }


做一个博客首页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>blog</title>
  6.     <link rel="stylesheet" href="css/style4.css">
  7. </head>
  8. <body>
  9. <header>
  10.     <h1>blog</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="images/1.jpg" alt="">
  22.         <p>文字介绍</p>
  23.         <button>按钮文字</button>
  24.     </article>
  25.     <article>
  26.         <img src="images/2.jpg" alt="">
  27.         <p>文字介绍</p>
  28.         <button>按钮文字</button>
  29.     </article>
  30.     <article>
  31.         <img src="images/3.jpg" alt="">
  32.         <p>文字介绍</p>
  33.         <button>按钮文字</button>
  34.     </article>
  35. </main>
  37. <footer>
  38.     <p>Copyright &#169; 2018</p>
  39. </footer>
  40. </body>
  41. </html>
  43. CSS:
  44. @import "style2.css";
  45. * {
  46.     outline: 1px solid #ccc;
  47.     margin: 10px;
  48.     padding: 10px;
  49. }
  50. body, nav, main, article {
  51.     display: flex;
  52. }
  53. body, article {
  54.     flex-direction: column;
  55. }
  56. footer {
  57.     border-top: 1px solid #ccc;
  58. }
  59. nav {
  60.     padding-bottom: 0;
  61. }


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

以主轴水平方向为例进行演示

  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>
  19.     <span class="item">item8</span>
  20.     <span class="item">item9</span>
  21.     <span class="item">item10</span>
  22.     <span class="item">item11</span>
  23. </div>
  25. <hr style="height: 3px; background-color:green;">
  27. <h3>2. wrap: 换行, 弹性元素超出容器边界的换到下一行显示</h3>
  28. <div class="container flex row wrap">
  29.     <span class="item">item1</span>
  30.     <span class="item">item2</span>
  31.     <span class="item">item3</span>
  32.     <span class="item">item4</span>
  33.     <span class="item">item5</span>
  34.     <span class="item">item6</span>
  35.     <span class="item">item7</span>
  36.     <span class="item">item8</span>
  37.     <span class="item">item9</span>
  38.     <span class="item">item10</span>
  39.     <span class="item">item11</span>
  40. </div>
  42. <hr style="height: 3px; background-color:green;">
  44. <h3>3. wrap-reverse: 换行, 弹性元素反转排列</h3>
  45. <div class="container flex row wrap-reverse">
  46.     <span class="item">item1</span>
  47.     <span class="item">item2</span>
  48.     <span class="item">item3</span>
  49.     <span class="item">item4</span>
  50.     <span class="item">item5</span>
  51.     <span class="item">item6</span>
  52.     <span class="item">item7</span>
  53.     <span class="item">item8</span>
  54.     <span class="item">item9</span>
  55.     <span class="item">item10</span>
  56.     <span class="item">item11</span>
  57. </div>
  58. </body>
  59. </html>
  60. @import "public.css";
  62. .container {
  63.     width: 500px;
  64. }
  66. .nowrap {
  67.     flex-direction: row;
  68.     flex-wrap: nowrap;
  69. }
  71. .wrap {
  72.     flex-direction: row;
  73.     flex-wrap: wrap;
  74. }
  76. .wrap-reverse {
  77.     flex-direction: row;
  78.     flex-wrap: wrap-reverse;
  79. }


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

以主轴水平方向为例进行演示

  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.     <span class="item">item8</span>
  20.     <span class="item">item9</span>
  21.     <span class="item">item10</span>
  22.     <span class="item">item11</span>
  23. </div>
  25. <hr style="height: 3px; background-color:green;">
  27. <h3>2. wrap: 换行, 弹性元素超出容器边界的换到下一行显示</h3>
  28. <div class="container flex row wrap">
  29.     <span class="item">item1</span>
  30.     <span class="item">item2</span>
  31.     <span class="item">item3</span>
  32.     <span class="item">item4</span>
  33.     <span class="item">item5</span>
  34.     <span class="item">item6</span>
  35.     <span class="item">item7</span>
  36.     <span class="item">item8</span>
  37.     <span class="item">item9</span>
  38.     <span class="item">item10</span>
  39.     <span class="item">item11</span>
  40. </div>
  42. <hr style="height: 3px; background-color:green;">
  44. <h3>3. wrap-reverse: 换行, 弹性元素反转排列</h3>
  45. <div class="container flex row wrap-reverse">
  46.     <span class="item">item1</span>
  47.     <span class="item">item2</span>
  48.     <span class="item">item3</span>
  49.     <span class="item">item4</span>
  50.     <span class="item">item5</span>
  51.     <span class="item">item6</span>
  52.     <span class="item">item7</span>
  53.     <span class="item">item8</span>
  54.     <span class="item">item9</span>
  55.     <span class="item">item10</span>
  56.     <span class="item">item11</span>
  57. </div>
  58. </body>
  59. </html>
  60. @import "public.css";
  62. .container {
  63.     width: 500px;
  64. }
  66. .nowrap {
  67.     flex-flow: row nowrap;
  68. }
  70. .wrap {
  71.     flex-flow: row wrap;
  72. }
  74. .wrap-reverse {
  75.     flex-flow: row wrap-reverse;
  76. }


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

1. flex-start: 主轴起点开始排列

  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. </div>
  17. <p>多行</p>
  18. <div class="container flex flex-start wrap">
  19.     <span class="item">item1</span>
  20.     <span class="item">item2</span>
  21.     <span class="item">item3</span>
  22.     <span class="item">item4</span>
  23.     <span class="item">item5</span>
  24.     <span class="item">item6</span>
  25. </div>
  27. <hr style="height: 3px; background:green;">
  28. <h3>2. flex-end: 主轴终点开始排列</h3>
  29. <p>单行</p>
  30. <div class="container flex flex-end">
  31.     <span class="item">item1</span>
  32.     <span class="item">item2</span>
  33.     <span class="item">item3</span>
  34. </div>
  35. <p>多行</p>
  36. <div class="container flex flex-end wrap">
  37.     <span class="item">item1</span>
  38.     <span class="item">item2</span>
  39.     <span class="item">item3</span>
  40.     <span class="item">item4</span>
  41.     <span class="item">item5</span>
  42.     <span class="item">item6</span>
  43. </div>
  45. <hr style="height: 3px; background:green;">
  47. <h3>3. center: 弹性元素做一个整体居中显示</h3>
  48. <p>单行</p>
  49. <div class="container flex center">
  50.     <span class="item">item1</span>
  51.     <span class="item">item2</span>
  52.     <span class="item">item3</span>
  53. </div>
  54. <p>多行</p>
  55. <div class="container flex center wrap">
  56.     <span class="item">item1</span>
  57.     <span class="item">item2</span>
  58.     <span class="item">item3</span>
  59.     <span class="item">item4</span>
  60.     <span class="item">item5</span>
  61.     <span class="item">item6</span>
  62. </div>
  64. <hr style="height: 3px; background:green;">
  66. <h3>4. space-between:首尾元素紧贴起止点,其它元素平分剩余空间</h3>
  67. <p>单行</p>
  68. <div class="container flex space-between">
  69.     <span class="item">item1</span>
  70.     <span class="item">item2</span>
  71.     <span class="item">item3</span>
  72. </div>
  73. <p>多行</p>
  74. <div class="container flex space-between wrap">
  75.     <span class="item">item1</span>
  76.     <span class="item">item2</span>
  77.     <span class="item">item3</span>
  78.     <span class="item">item4</span>
  79.     <span class="item">item5</span>
  80.     <span class="item">item6</span>
  81. </div>
  83. <hr style="height: 3px; background:green;">
  85. <h3>5. space-around:每个元素二边空间相等,相邻元素空间累加</h3>
  86. <p>单行</p>
  87. <div class="container flex space-around">
  88.     <span class="item">item1</span>
  89.     <span class="item">item2</span>
  90.     <span class="item">item3</span>
  91. </div>
  92. <p>多行</p>
  93. <div class="container flex space-around wrap">
  94.     <span class="item">item1</span>
  95.     <span class="item">item2</span>
  96.     <span class="item">item3</span>
  97.     <span class="item">item4</span>
  98.     <span class="item">item5</span>
  99.     <span class="item">item6</span>
  100. </div>
  102. <hr style="height: 3px; background:green;">
  104. <h3>6. space-evenly:每个元素, 以及元素到与起止点的空间全部相等</h3>
  105. <p>单行</p>
  106. <div class="container flex space-evenly">
  107.     <span class="item">item1</span>
  108.     <span class="item">item2</span>
  109.     <span class="item">item3</span>
  110. </div>
  111. <p>多行</p>
  112. <div class="container flex space-evenly 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. </div>
  120. </body>
  121. </html>
  122. CSS
  123. @import "public.css";
  125. .container {
  126.     width: 500px;
  127. }
  129. .wrap {
  130.     flex-wrap: wrap;
  131. }
  133. .flex-start {
  134.     justify-content: flex-start;
  135. }
  137. .flex-end {
  138.     justify-content: flex-end;
  139. }
  141. .center {
  142.     justify-content: center;
  143. }
  145. .space-between {
  146.     justify-content: space-between;
  147. }
  149. .space-around {
  150.     justify-content: space-around;
  151. }
  153. .space-evenly {
  154.     justify-content: space-evenly;
  155. }




使用弹性元素主轴对齐来改写导航

  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>
  18. CSS:
  20. a {
  21.     text-decoration: none;
  22.     background-color: lightgreen;
  23.     color: black;
  24.     padding: 5px 10px;
  25.     margin: 0 5px;
  26.     border-radius: 5px 5px 0 0;
  27. }
  28. nav {
  29.     display: flex;
  30.     border-bottom: 1px solid gray;
  31. }
  32. a:hover, a:focus, a:active {
  33.     background-color: orangered;
  34.     color: white;
  35. }
  36. nav {
  37.     justify-content: center;
  38. }


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

  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. </div>
  17. <p>多行容器:</p>
  18. <div class="container flex wrap wrap-stretch">
  19.     <span class="item">item1</span>
  20.     <span class="item">item2</span>
  21.     <span class="item">item3</span>
  22.     <span class="item">item4</span>
  23.     <span class="item">item5</span>
  24.     <span class="item">item6</span>
  25. </div>
  27. <h3>2.flex-start: 元素紧贴容器起点</h3>
  28. <p>单行容器:</p>
  29. <div class="container flex flex-start">
  30.     <span class="item">item1</span>
  31.     <span class="item">item2</span>
  32.     <span class="item">item3</span>
  33. </div>
  34. <p>多行容器:</p>
  35. <div class="container flex wrap wrap-flex-start">
  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.     <span class="item">item6</span>
  42. </div>
  45. <h3>3.flex-end: 元素紧贴容器终点</h3>
  46. <p>单行容器:</p>
  47. <div class="container flex flex-end">
  48.     <span class="item">item1</span>
  49.     <span class="item">item2</span>
  50.     <span class="item">item3</span>
  51. </div>
  52. <p>多行容器:</p>
  53. <div class="container flex wrap wrap-flex-end">
  54.     <span class="item">item1</span>
  55.     <span class="item">item2</span>
  56.     <span class="item">item3</span>
  57.     <span class="item">item4</span>
  58.     <span class="item">item5</span>
  59.     <span class="item">item6</span>
  60. </div>
  63. <h3>4.center: 所有元素做为一个整体在容器垂直方向居中显示</h3>
  64. <p>单行容器:</p>
  65. <div class="container flex center">
  66.     <span class="item">item1</span>
  67.     <span class="item">item2</span>
  68.     <span class="item">item3</span>
  69. </div>
  70. <p>多行容器:</p>
  71. <div class="container flex wrap wrap-center">
  72.     <span class="item">item1</span>
  73.     <span class="item">item2</span>
  74.     <span class="item">item3</span>
  75.     <span class="item">item4</span>
  76.     <span class="item">item5</span>
  77.     <span class="item">item6</span>
  78. </div>
  80. <h3>5.space-between: 垂直方向首尾行紧贴起止点,其它行平分剩余空间</h3>
  81. <p>多行容器:</p>
  82. <div class="container flex wrap wrap-space-between">
  83.     <span class="item">item1</span>
  84.     <span class="item">item2</span>
  85.     <span class="item">item3</span>
  86.     <span class="item">item4</span>
  87.     <span class="item">item5</span>
  88.     <span class="item">item6</span>
  89.     <span class="item">item7</span>
  90.     <span class="item">item8</span>
  91.     <span class="item">item9</span>
  92.     <span class="item">item10</span>
  93.     <span class="item">item11</span>
  94.     <span class="item">item12</span>
  95. </div>
  97. <h3>6.space-around: 每个元素二边空间相等,相邻元素空间累加</h3>
  98. <p>多行容器:</p>
  99. <div class="container flex wrap wrap-space-around">
  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.     <span class="item">item7</span>
  107.     <span class="item">item8</span>
  108.     <span class="item">item9</span>
  109.     <span class="item">item10</span>
  110.     <span class="item">item11</span>
  111.     <span class="item">item12</span>
  112. </div>
  113. <h3>7.space-evenly: 每个元素, 以及元素到与起止点的空间全部相等</h3>
  114. <p>多行容器:</p>
  115. <div class="container flex wrap wrap-space-evenly">
  116.     <span class="item">item1</span>
  117.     <span class="item">item2</span>
  118.     <span class="item">item3</span>
  119.     <span class="item">item4</span>
  120.     <span class="item">item5</span>
  121.     <span class="item">item6</span>
  122.     <span class="item">item7</span>
  123.     <span class="item">item8</span>
  124.     <span class="item">item9</span>
  125.     <span class="item">item10</span>
  126.     <span class="item">item11</span>
  127.     <span class="item">item12</span>
  128. </div>
  129. </body>
  130. </html>
  132. css:
  133. @import "public.css";
  135. .container {
  136.     width: 500px;
  137.     height: 300px;
  138. }
  140. .wrap {
  141.     flex-wrap: wrap;
  142. }
  144. /*单行容器*/
  145. /*align-items: 设置单行容器中元素在垂直轴上的排列方式*/
  146. .stretch {
  147.     align-items: stretch;
  148. }
  150. .flex-start {
  151.     align-items: flex-start;
  152. }
  154. .flex-end {
  155.     align-items: flex-end;
  156. }
  158. .center {
  159.     align-items: center;
  160. }
  162. /*多行容器*/
  163. /*align-content: 设置多行容器中弹性元素的对齐方式和空间分配方案*/
  164. .wrap-stretch {
  165.     align-content: stretch;
  166. }
  168. .wrap-flex-start {
  169.     align-content: flex-start;
  170. }
  172. .wrap-flex-end {
  173.     align-content: flex-end;
  174. }
  176. .wrap-center {
  177.     align-content: center;
  178. }
  180. .wrap-space-between {
  181.     align-content: space-between;
  182. }
  184. .wrap-space-around {
  185.     align-content: space-around;
  186. }
  188. .wrap-space-evenly {
  189.     align-content: space-evenly;
  190. }







总结

1.弹性容器为分二种:
display: flex: 块级弹性容器
display: inline-flex: 行内块级弹性容器
2.弹性元素(Flex item)必须是弹性容器的直接子元素
3.主轴/垂直轴
|a|flex-direction|row(默认), row-reverse, columne, column-reverse|弹性元素在主轴上排列方向|
|b|flex-wrap|norap(默认), wrap, wrap-reverse|弹性元素在主轴上是否换行|
|c|flex-flow|flex-direction, flex-wrap|定义主轴方向以及弹性元素是否换行,flex-direction和flex-wrap简写|
|d|justify-content|flex-start(默认值),flex-end,center,space-between,space-around,space-evenly|弹性元素在主轴上的对齐方式与空间分布|
|e|align-items|stretch(默认),flex-start,flex-end,center|定义弹性元素在垂直轴上的对齐方式|
|f|align-content|stretch(默认),flex-start,flex-end,center,space-between,space-around,space-evenly|定义多行容器中弹性元素在垂直轴上的对齐方式与空间分配|

上一条：laravel框架基础 20191104下一条：弹性容器（flex，主轴和交叉轴，排列方式）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多