题目描述
每一个盒子宽度高度固定,数量不确定,想让他们自适应在一个大盒子内(宽高auto)。
使用flex布局,当屏幕适中时可以正常显示
但是不是适中时 变成这样了
当遇到这情况时 想让第二行的1,2也跟着第一行的1,2一样排,该怎么实现呢
题目来源及自己的思路
无
相关代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>demo</title>
<style type="text/css">
.container {background: #aaa;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.container > span {
display: inline-block;
height: 66px;
width: 300px;
background: red;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- built files will be auto injected -->
</body>
</html>
你期待的结果是什么?实际看到的错误信息又是什么?
当遇到二图情况时 想让第二行的1,2也跟着第一行的1,2一样排,该怎么实现呢
让CSS flex布局最后一行列表左对齐的N种方法(小结)
搜索关键词
css
flex
最后一行
靠左