Flex Box页面布局实战课程-流式布局

ゝ一世哀愁。 2024-02-19 16:32 46阅读 0赞

### 效果图 ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
![在这里插入图片描述][20190124100952893.png]  
代码

<!DOCTYPE>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>流式布局:黄菊华老师</title>
    </head>
    <body>
    
    <style>
    .ronqi{ width:200px; height:200px; background-color:#CCC; display:flex; flex-wrap:wrap; align-content:flex-start;}
    .xm{ width:50px; height:50px; background-color:#FFF; border:1px solid red; padding:10px; box-sizing:border-box;}
    </style>
    <div class="ronqi">
    	
        <div class="xm">01</div>
        <div class="xm">02</div>
        <div class="xm">03</div>
        <div class="xm">04</div>
        <div class="xm">05</div>
        <div class="xm">01</div>
        <div class="xm">02</div>
        <div class="xm">03</div>
        <div class="xm">04</div>
        <div class="xm">05</div>    
    </div>
    
    </body>
    </html>

[欢迎大家学习我的视频课程：Flex Box页面布局实战课程(网页移动端微信等)][Flex Box]  
![Flex Box页面布局实战课程-流式布局][Flex Box_-]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[20190124100952893.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/45a97151bece4cac8a84d5535ea66123.png
[Flex Box]: https://ke.qq.com/course/373211?tuin=2b10d56
[Flex Box_-]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/a420367b23fd4aaa8cebbf65d4c8e4ba.png

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flex布局实战

Flex布局简介 Flex布局是一种用于网页布局的现代CSS布局模型。它使用flex容器和flex项来实现灵活的、响应式的布局。Flex容器是父元素，内部包含一系列的fl

本是古典何须时尚/ 2024年03月01日 03:56/ 0 赞/ 26 阅读

相关 Flex Box页面布局实战课程-固定的底栏

有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部。 ![在这里插入图片描述][watermark_ty

ゞ浴缸里的玫瑰/ 2024年02月19日 17:48/ 0 赞/ 43 阅读

相关 Flex Box页面布局实战课程-圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水

港控/mmm°/ 2024年02月19日 17:48/ 0 赞/ 50 阅读

相关 Flex Box页面布局实战课程-流式布局

效果图微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][http

ゝ一世哀愁。/ 2024年02月19日 16:32/ 0 赞/ 47 阅读

相关 Flex Box页面布局实战课程-基本网格布局

效果图微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][http

本是古典何须时尚/ 2024年02月19日 16:30/ 0 赞/ 5 阅读

相关 CSS3属性----flex布局（Flex Box）

CSS3 弹性盒子(Flex Box) 1. 弹性盒子是 CSS3 的一种新的布局模式。 2. CSS3 弹性盒（ Flexible Box 或 flexbox），是

超、凢脫俗/ 2022年12月06日 12:59/ 0 赞/ 242 阅读

相关 CSS3 - Flex Box (弹性布局)

文章目录 1. 概要 2. justify-content 属性 3. align-items 属性 4. flex-wrap 属性 5.

谁践踏了优雅/ 2022年10月26日 14:20/ 0 赞/ 218 阅读

相关移动页面的流式布局

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

女爷i/ 2022年09月08日 03:33/ 0 赞/ 203 阅读

相关 CSS3 flex布局和box布局详解

弹性盒子布局是现在十分流行的布局方式，能让我们更好地操作子元素的布局。但是要注意，元素设置为flex布局以后，子元素的float、clear、vertical-align属性会

电玩女神/ 2022年05月21日 09:50/ 0 赞/ 300 阅读

相关 flex 布局实战

[骰子模型][Link 1] 单项目 ![在这里插入图片描述][20190616165232886.jpg] <view> <view class=

绝地灬酷狼/ 2022年01月13日 12:45/ 0 赞/ 157 阅读