微信小程序-Flex入门实战

ゝ一世哀愁。 2024-02-19 15:37 40阅读 0赞

网页代码  
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Flex Box简单表单</title>
    <style> 
    .flex-container { 
        display: -webkit-flex; 
        display: flex; 
        width: 400px; 
        height: 250px; 
        background-color: lightgrey; 
    } 
    .flex-item{ 
        background-color: cornflowerblue; 
        width: 100px; 
        height: 100px; 
       margin: 10px; 
    } 
    </style> 
    </head>
    <body>
    <div class="flex-container"> 
      <div class="flex-item">flex item 1</div> 
      <div class="flex-item">flex item 2</div> 
      <div class="flex-item">flex item 3</div> 
    </div> 
    </body>
    </html>

效果如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

[欢迎大家收看我的视频教程：微信小程序界面设计布局Flex Box精通课程 （微信小程序界面设计必备技能）][Flex Box_]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0b76880bd6d74e0788173e1c42fbeaf4.png
[Flex Box_]: https://ke.qq.com/course/368348?tuin=2b10d56
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/dc2a164fb2f04fb9b7ecec84b6730aa5.png