博客列表 >12.30作业

12.30作业

-   迷舍人
- 迷舍人原创
2019年12月31日 18:45:15623浏览

思路:感觉grid方便 做的时候 容器 / 项目 项目内容 ,分清楚 不要乱套

grid网格中所有项目的整体对齐方式

效果图

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>grid网格中所有项目的整体对齐方式</title>
  6. <style>
  7. *:not(body){
  8. outline: red 1px dashed;
  9. }
  10. .container{
  11. width: 500px;
  12. height: 400px;
  13. font-size: 2rem;
  14. /*grid布局*/
  15. display: grid;
  16. grid-template-columns: repeat(3,100px);
  17. grid-template-rows: repeat(3,80px);
  18. /*间隙*/
  19. grid-gap: 10px;
  20. /*设置项目在网格容器中的对齐方式*/
  21. /*水平对齐方式*/
  22. /*默认在起始方向*/
  23. /*justify-content: start;*/
  24. /*水平居中*/
  25. /*justify-content: center;*/
  26. /*在最右侧 (终止边线)*/
  27. /*justify-content: end;*/
  28. /*垂直方向对齐*/
  29. /*默认在起始方向*/
  30. /*align-content: start;*/
  31. /*垂直居中*/
  32. /*align-content:center;*/
  33. /*最下面(终止边线)*/
  34. /*align-content:end;*/
  35. /*对齐方式的简写 第一个是 垂直 第二个是水平 */
  36. /*place-content: start center;*/
  37. /*项目中的内容对齐*/
  38. /*水平方向*/
  39. /*默认 拉伸*/
  40. /*justify-items: stretch;*/
  41. /*最左边(起始位置)*/
  42. /*justify-items: start;*/
  43. /*最右边 (最后面)*/
  44. /*justify-items: end;*/
  45. /*居中*/
  46. /*justify-items: center;*/
  47. /*垂直方向*/
  48. /*默认值*/
  49. /*align-items: stretch;*/
  50. /*最上面(起始位置)*/
  51. /*align-items: start;*/
  52. /*垂直居中*/
  53. /*align-items: center;*/
  54. /*垂直最下面*/
  55. /*align-items: end;*/
  56. /*简写 第一个属性是 垂直 第二个是水平*/
  57. /*place-items: end start;*/
  58. }
  59. .container > .item{
  60. background-color: yellow;
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <div class="container">
  66. <div class="item">1</div>
  67. <div class="item">2</div>
  68. <div class="item">3</div>
  69. <div class="item">4</div>
  70. <div class="item">5</div>
  71. <div class="item">6</div>
  72. <div class="item">7</div>
  73. <div class="item">8</div>
  74. <div class="item">9</div>
  75. </div>
  76. </body>
  77. </html>

grid中某一个项目的对齐方式

效果图

代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>grid中某一个项目的对齐方式</title>
  6. <style>
  7. *:not(body){
  8. outline: 1px red dashed;
  9. }
  10. /*网格容器*/
  11. .container{
  12. width: 600px;
  13. font-size: 2rem;
  14. /*grid布局*/
  15. display: grid;
  16. grid-template-columns: repeat(3,1fr);
  17. grid-template-rows: repeat(3,150px);
  18. grid-gap: 10px;
  19. }
  20. .container > .item:first-of-type{
  21. width: 100px;
  22. height: 100px;
  23. background-color: #63a35c;
  24. text-align: center;
  25. /*项目在容器中的对齐方式*/
  26. /*水平方向*/
  27. /*默认在起始*/
  28. /*justify-self: stretch;*/
  29. /*水平居中*/
  30. /*justify-self: center;*/
  31. /*水平最后*/
  32. /*justify-self: end;*/
  33. /*垂直方向*/
  34. /*默认起始方向*/
  35. /*align-self: stretch;*/
  36. /*垂直居中*/
  37. /*align-self: center;*/
  38. /*垂直最后*/
  39. /*align-self: end;*/
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <div class="container">
  45. <div class="item">1</div>
  46. <div class="item">2</div>
  47. <div class="item">3</div>
  48. <div class="item">4</div>
  49. <div class="item">5</div>
  50. <div class="item">6</div>
  51. <div class="item">7</div>
  52. <div class="item">8</div>
  53. <div class="item">9</div>
  54. </div>
  55. </body>
  56. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议