综合教程

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

时间:2019/1/21 12:35:17  作者:互联网  来源:网络转载  查看:36798  评论:0
内容摘要:效果图HTML代码<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /...
效果图
Flex_Box页面布局实战课程-流式布局

HTML代码

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>流式布局</title>

</head>

<body>

 

<style>

.rongqi{ width:200px; height:200px; background-color:#CCC; display:flex;flex-wrap:wrap;align-content:flex-start;}

.xm{ width:25%; height:50px; background-color:#FFF; border:1px solid red; padding:10px; box-sizing:border-box;}

</style>

<div class="rongqi">

     <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">06</div>

    <div class="xm">07</div>

    <div class="xm">08</div>

    <div class="xm">09</div>

    <div class="xm">10</div>

</div>

 

</body>

</html>




相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |