欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端基础，伸缩盒布局小案例及总结

程序员文章站 2022-03-03 23:29:31
...

代码示例

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <title>flex</title>
    6. 

  6.         <style type="text/css">
    7. 

  7.             body,ul,li{
    8. 

  8.                 margin: 0;
    9. 

  9.                 padding: 0;
    10. 

  10.             }
    11. 

  11.             ul{
    12. 

  12.                 list-style: none;
    13. 

  13.             }
    14. 

  14.             .container{
    15. 

  15.                 position: relative;
    16. 

  16.                 display: flex;
    17. 

  17.                 width: 800px;
    18. 

  18.                 background-color: aquamarine;
    19. 

  19.                 margin: 0 auto;
    20. 

  20.                 text-align: center;
    21. 

  21.                 line-height: 30px;
    22. 

  22.                 top: 20px;
    23. 

  23.                 /* height: 30px; */
    24. 

  24.             }
    25. 

  25.             .container>li>ul{
    26. 

  26.                 position: absolute;
    27. 

  27.                 width: 200px;
    28. 

  28.                 text-align: center;
    29. 

  29.                 background-color: #69d49d;
    30. 

  30.             }
    31. 

  31.             .container>li{
    32. 

  32.                 flex:1;
    33. 

  33.             }
    34. 

  34.             .container>li:hover{
    35. 

  35.                 background-color: #aaff7f;
    36. 

  36.             }
    37. 

  37.             .container>li>ul{
    38. 

  38.                 display: none;
    39. 

  39.             }
    40. 

  40.             .container>li:hover>ul{
    41. 

  41.                 display: block;
    42. 

  42.             }
    43. 

  43.             .container>li>ul>li:hover{
    44. 

  44.                 background-color:  #00aa7f;
    45. 

  45.             }
    46. 

  46.         </style>
    47. 

  47.     </head>
    48. 

  48.     <body>
    49. 

  49.         <ul class="container">
    50. 

  50.             <li>
    51. 

  51.                 PHP
    52. 

  52.                 <ul>
    53. 

  53.                     <li>基础</li>
    54. 

  54.                     <li>进阶</li>
    55. 

  55.                     <li>高级</li>
    56. 

  56.                 </ul>
    57. 

  57.             </li>
    58. 

  58.             <li>
    59. 

  59.                 WEB
    60. 

  60.                 <ul>
    61. 

  61.                     <li>vue</li>
    62. 

  62.                     <li>uni-app</li>
    63. 

  63.                     <li>node.js</li>
    64. 

  64.                 </ul>
    65. 

  65.             </li>
    66. 

  66.             <li>Java</li>
    67. 

  67.             <li>Python</li>
    68. 

  68.         </ul>
    69. 

  69.     </body>
    70. 

  70. </html>
    71.

效果展示

前端基础，伸缩盒布局小案例及总结

总结

弹性布局就是父元素设置display:flex;,然后子元素根据需要设置属性，其中个人觉得常用的有flex：1;（子元素平均分配父元素）,flex-grow:1;（根据子元素的内容来灵活分配）。

另外，在此小demo中发现父元素仅设置line-height也可以把盒子撑开，而且子元素会继承这个行高。

上一篇： 手把手教你使用css制作一个简单的心跳效果（代码详解）

下一篇： vue 简单使用

推荐阅读