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

flex布局，术语和项目

程序员文章站 2022-05-15 09:17:10
...

flex布局，术语和项目

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7. 

  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8. 

  8.     <title>flex布局，术语和项目</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <div class="container">
    13. 

  13.         <div class="item">item1</div>
    14. 

  14.         <div class="item">item2</div>
    15. 

  15.         <div class="item">item3</div>
    16. 

  16.     </div>
    17. 

  17.     <style>
    18. 

  18.         * {
    19. 

  19.             margin: 0;
    20. 

  20.             padding: 0;
    21. 

  21.             box-sizing: 0;
    22. 

  22.         }
    23. 

    24. 

  24.         .container {
    25. 

  25.             /* flex容器 */
    26. 

  26.             display: flex;
    27. 

  27.             height: 20em;
    28. 

  28.             border: 5px solid #000;
    29. 

  29.             flex-direction: row;
    30. 

  30.             /* flex-direction: column; 主轴选择， */
    31. 

  31.             /* flex-wrap: wrap;  换行控制 */
    32. 

  32.             place-content: end;
    33. 

  33.         }
    34. 

    35. 

  35.         .container>.item {
    36. 

  36.             width: 10em;
    37. 

  37.             padding: 1em;
    38. 

  38.             border: 2px solid red;
    39. 

  39.             background-color: lightgreen;
    40. 

  40.         }
    41. 

  41.     </style>
    42. 

  42. </body>
    43. 

    44. 

  44. </html>
    45.

上一篇： 定位实战：模态框

下一篇： 3分钟13行代码搭建sass版移动端网格系统_html/css_WEB-ITnose

推荐阅读