如何解决调整屏幕大小时如何使盒子彼此包裹？ Flexbox
我对自适应设计和flexbox的整个概念是陌生的。我该如何做，以免箱子彼此叠放？
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<Style>
.container {
display: flex;
flex-wrap: wrap;
}
.box {
height: 100px;
text-align: center;
}
header {
width: 100%;
order: 1;
background-color: lime
}
.red {
width: 50%;
order: 2;
background-color: red
}
.orange {
width: 50%;
order: 3;
background-color: orange
}
.footer {
width: 100%;
order: 4;
background-color: darkblue
}
.light_blue {
width: 20%;
order: 5;
background-color: lightblue
}
.green {
width: 60%;
order: 6;
background-color: green
}
.light_green {
width: 20%;
order: 7;
background-color: lightgreen
}
</style>
</head>
<body>
<div class="container">
<header class="box lime">
</div>
<div class="box red"></div>
<div class="box orange"></div>
<footer class="box dark_blue">
</div>
<div class="box light_blue"></div>
<div class="box green"></div>
<div class="box light_green"></div>
</div>
</body>
</html>解决方法
Flexbox在内容动态时更倾向于使容器适应行，因此您可能不知道最终的宽度或高度。
对于您的布局，我强烈建议您使用经典的float，它也很容易通过mediaqueries进行操作以使其具有响应性。您的代码已准备就绪：
* {box-sizing:border-box;}<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<Style>
.container {
}
.box {
height: 100px;
text-align: center;
}
header {width: 100%;float:left;background-color: lime; }
.red {width: 50%;float:left;background-color: red}
.orange {width: 50%;float:left;background-color: orange}
.footer {width: 100%; float:left;background-color: darkblue}
.light_blue {width: 20%; float:left;background-color: lightblue}
.green {width: 60%; float:left;background-color: green}
.light_green{width: 20%;float:left;background-color: lightgreen}
</style>
</head>
<body>
<div class="container">
<header class="box lime"></div>
<div class="box red"></div>
<div class="box orange"></div>
<footer class="box dark_blue"></div>
<div class="box light_blue"></div>
<div class="box green"></div>
<div class="box light_green"></div>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。