兼容Square Divs跨浏览器兼容

Question

我的页面宽50/50。左半部分具有六个div的行。条件：

• 6个正方形必须始终保持正方形。
• 前5个正方形应在右边留有边距/填充以进行分隔。
• 所有六个正方形必须保持同一行。如果我可以使它正常工作，那么我可以对较小的视口中的响应度进行必要的调整。

• 跨浏览器兼容最新版本的chrome和firefox。

  
  

  
  

  
  

  
  

  
  

  
  

  
  L1
  

  
  

  
  

  
  

  
  

  
  

  
  L2
  

  
  

  
  

  
  

  
  

  
  

  
  L3
  

  
  

  
  

  
  

  
  

  
  

  
  L4
  

  
  

  
  

  
  

  
  

  
  

  
  L5
  

  
  

  
  

  
  

  
  

  
  

  
  L6
  

  
  

  
  

  
  

  
  

  
  
  
  

  <div class="column" style="margin-left: 20px; border: 1px black solid; height: 500px">
  
      Other stuff
  

  
  

Answer 1

The main trick here is to make the div a square.

Normally one set a width, the height to 0 and a padding that equals to
the width

.square {

  height: 0;

  width: 33%;

  padding-bottom: 33%;

  background: lightgray;

}


<div class="square">

  <div>

    Content

  </div>

</div>

现在，当我们html" target="_blank">添加时display:flex，我们不能使用padding百分比（Firefox错误），并且由于我们使用，所以我们也不能将高度与百分比一起使用height: 0。

为了克服这些问题，何时可以使用视口单位vw代替，与此同时我们也可以使用height而不是padding保持平方。

因此calc((100% / 6) - 10px);，我们没有使用这样的视口单位设置像这样的宽度，而是使用约10像素宽的装订线平均分布6个项目，而是使用视口单位calc(( (50vw - 65px) / 6) - 10px);

的50vw是浏览器宽度的一半，则65px是的总和container的左/右填充，50px加上15px所述沟槽之间columns。

这也使我们可以跳过多余的flex-item-inner元素，跳过position: absolute在content元素上的使用，并且由于我们没有在上使用百分比作为高度，因此flex-item我们可以这样做来使内容居中

.flex-item-content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

最终结果是这样

堆栈片段

.container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  padding: 25px;

  border: 2px red solid;

}

.column {

  flex-basis: calc(50% - 15px);

}

.flex-container {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}

.flex-item {

  position: relative;

  flex-basis: calc(( (50vw - 65px) / 6) - 10px);

  height: calc(( (50vw - 65px) / 6) - 10px);

  background: white;

  border: 1px solid red;

  overflow: hidden;

}

.flex-item-content {

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}

.flex-item:last-child .flex-item-content {

  color: green;

}



.column .other {

  padding: 15px;

  border: 1px solid black;

  padding-bottom: 35px;

}

.column.left .other {

  margin-top: 10px;

}

.column.right .other:nth-child(n+2) {

  margin-top: 10px;

}



@media (max-width: 768px) {

  .flex-item {

    flex-basis: calc(( (50vw - 65px) / 3) - 10px);

    height: calc(( (50vw - 65px) / 3) - 10px);

  }

  .flex-item:nth-child(n+4)  {

    margin-top: 12px;

  }

}

@media (max-width: 480px) {

  .flex-item {

    flex-basis: calc(( (50vw - 65px) / 2) - 10px);

    height: calc(( (50vw - 65px) / 2) - 10px);

  }

  .flex-item:nth-child(n+3)  {

    margin-top: 15px;

  }

}


<div class="container">

  <div class="column left">

    <div class="flex-container">

      <div class="flex-item">

          <div class="flex-item-content">

            L1

          </div>

      </div>

      <div class="flex-item">

          <div class="flex-item-content">

            L2

          </div>

      </div>

      <div class="flex-item">

          <div class="flex-item-content">

            L3

          </div>

      </div>

      <div class="flex-item">

          <div class="flex-item-content">

            L4

          </div>

      </div>

      <div class="flex-item">

          <div class="flex-item-content">

            L5<br>L5

          </div>

      </div>

      <div class="flex-item">

          <div class="flex-item-content">

            L6

          </div>

      </div>

    </div>



    <div class="other">

      Other stuff - left

    </div>



  </div>

  <div class="column right">

    <div class="other">

      Other stuff - right

    </div>



    <div class="other">

      Other stuff - right

    </div>

  </div>

</div>