2020年5月css布局flex 多行四列 多行多列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex</title>
</head>
<body>
<p>小方块20*15</p>
<p>间距都是10</p>
<style>
*{margin:0;padding:0;list-style: none;font-size: 12px;}
</style>
<style>
.parent{
justify-content: space-evenly;
box-sizing: border-box;
width:130px;/* 5个空隙*10+4个方块*20 */
display: flex;
flex-wrap: wrap;/*换行*/
padding-left:10px;
padding-top:10px;
background: green;
}
.child{
box-sizing: border-box;
width:20px;
height:15px;
border:1px solid;
flex:none;/*不放大不缩小*/
margin-right: 10px;
margin-bottom: 10px;
}
</style>
<ul class="parent">
<li class="child">1</li>
<li class="child">2</li>
<li class="child">3</li>
<li class="child">4</li>
<li class="child">5</li>
<li class="child">6</li>
<li class="child">7</li>
<li class="child">8</li>
<li class="child">9</li>
<li class="child">10</li>
<li class="child">11</li>
<li class="child">12</li>
<li class="child">13</li>
</ul>
</body>
</html>
相关推荐
zhanghaibing00 2020-05-31
yuanye0 2020-05-20
myloveqiqi 2020-05-02
容数据服务集结号 2020-03-01
wangjie 2020-02-12
wwwxuewen 2020-01-20
wangjie 2020-01-12
e度空间 2020-01-12
akcsdno 2019-12-26
MaureenChen 2019-12-01
随智阔 2014-01-13
jiedinghui 2019-11-10
somboy 2019-11-10
waterv 2019-11-09
wangjie 2019-11-04
ThikHome 2019-09-24
红壶吃猬队 2019-09-08
mokingone 2018-03-09