时间戳

首页 > 解决方案 > flex-box 如何制作更具响应性的“盒子”

html - flex-box 如何制作更具响应性的“盒子”

问题描述

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

我不想让盒子成为弹性项目的全宽（或高度），因为我希望它们之间有一些空间，而且我不希望它们溢出它们的 .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>

标签： htmlcssflexbox

解决方案

我没有得到你的完整查询，但如果你想在不手动调整高度的情况下做出方形响应，那么使用 padding hack

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

推荐阅读