Question

我希望盒子反应更快，并始终保持1：1的比例。当我将min-width设置为.box1，.box2时，它们始终占据.box的整个宽度！就像他们对身高没有反应？

我不想将flex项目的宽度（或高度）装满，因为我希望它们之间有一些空间，并且我不希望它们使.box容器溢出。.（我想保持里面）

我知道我可以使用媒体查询来调整.box1，.box2，.box3，..的大小，但是还有其他方法吗？

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  //margin:0 -40px;
}


/*first two children*/

.grid>.box:not(:last-child) {
  background: grey;
  width: 50%;
}

.box1,
.box2,
.box3 {
  border: 2px solid #111;
  width: 100px;
  height: 100px;
  transform: rotate(-45deg);
  text-align: center;
}

.box1,
.box2 {
  margin: 0 auto;
}

.box p {
  position: relative;
  color: white;
}

<div class="wrapper">
  <div class="grid">
    <div class="box">
      <div class="box1">
        <p>Here is something !</p>
      </div>
    </div>
    <div class="box ">
      <div class="box2"></div>
    </div>
    <div class="box ">
      <div class="box3"></div>
    </div>
  </div>
</div>

Answer 1

我没有收到完整的查询，但是如果您想在不手动调整其高度的情况下使正方形响应，则可以使用padding hack

.box1,
.box2,
.box3{
        width: 100%;
        height: 0;
        padding-bottom: 50%;
        postition:relative
        background: red;
    }

flex-box如何使响应更快的“盒子”

1 个答案: