如何使用 flexbox 制作四个基于视口的盒子？

Posted 2023-03-07

【中文标题】如何使用 flexbox 制作四个基于视口的盒子？

【英文标题】：How to make four viewport based boxes with flexbox?

【发布时间】：2017-07-17 06:18:01

【问题描述】：

我想在纯 CSS 中制作基于宽度和高度的四个视口宽度和不相等的框。

宽度必须大于高度并希望它具有响应性

像这样：

我这样做：

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？

【参考方案1】：

您可以使用视口单位来制作相对于视口高度和宽度的高度和宽度，然后只需使用边距在网格中的元素之间创建一致的间距。

body 
  margin: 0;

.container 
  display: flex;
  flex-wrap: wrap;
  padding: 1em 0 0 1em;
  background: black;
  margin: auto;

.box 
  width: calc(50% - 1em); height: calc(50vh - 1.5em);
  background: #171717;
  margin: 0 1em 1em 0;
  box-sizing: border-box;

<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>

【参考方案2】：

.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