我想在纯 CSS 中制作四个基于视口(viewport)宽度和高度且不相等的框。
宽度必须大于高度并希望其响应
像这样:
我这样做:
html, body {
width: 100%;
height: 100%;
}
.container {
padding: 25px;
width: 100%;
height: calc(100vh - 100px);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.container.four {
width: 80%;
margin: 0 auto;
}
.box {
background-color: red;
position: relative;
height: 100%;
}
.box--four {
width: 47%;
height: 45%;
}
<div class="container four">
<div class="box box--four">
</div>
<div class="box box--four">
</div>
<div class="box box--four">
</div>
<div class="box box--four">
</div>
</div>
我可以用纯 CSS 做到这一点吗?或者我需要 js 来实现这个?
最佳答案
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 40vw;
height: 20vw;
margin: 5px;
background-color: red;
}
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
jsFiddle
关于html - 如何使用 Flexbox 制作四个基于视口(viewport)的盒子?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42472132/