响应方形Div跨浏览器兼容

本文介绍了响应方形Div跨浏览器兼容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个宽度为50/50的页面。左边的一排有六个div。
标准：

6个方格必须始终保持平方。

前5个方格应该有margin / padding来分隔。

所有六个方格必须保持在同一行上。如果我能做到这一点，我可以在较小的视口中对响应进行必要的调整。

跨浏览器兼容最新版本的ie，chrome和firefox。 $ b

我的codepen：

图片：

堆栈片段

。容器{display：flex; flex-wrap：wrap;证明内容：空间之间; 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）;高度：calc（（（50vw - 65px）/ 6） - 10px）;背景：白色;边框：1px纯红色; overflow：hidden;}。flex-item-content {height：100％;显示：flex; justify-content：center; align-items：center;}。flex-item：last-child .flex-item-content {color：green;}。column .other {padding：15px;边框：1px纯黑色; 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）;高度：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）;高度：calc（（（50vw - 65px）/ 2） - 10px）; } .flex-item：nth-child（n + 3）{margin-top：15px; } < div class =container> < div class =left 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< L5< / div> < / DIV> < div class =flex-item> < div class =flex-item-content> L6< / div> < / DIV> < / DIV> < div class =other>其他的东西 - 左< / div> < / DIV> < div class =column right> < div class =other>其他的东西 - 正确< / div> < div class =other>其他的东西 - 正确< / div> < / div>< / div>

I have a page that is 50/50 wide. The left half has a row with six divs.Criteria:

6 squares must always remain square.
First 5 squares should have margin/padding to right for separation.
All six squares must stay on same single row. If I can get that to work i can make the needed adjustments for responsiveness in smaller viewports.
Cross browser compatible for newest version of ie, chrome, and firefox.

My codepen: https://codepen.io/johnsontroye/pen/zzNVBr

Image: enter image description here

<body>
  <div class="container">
    <div class="column" style="margin-right: 20px">
      <div class="flex-container">
        <div class="flex-item">
          <div class="flex-item-inner">
            <div class="flex-item-inner-content">
              L1
            </div>
          </div>
        </div>
        <div class="flex-item">
          <div class="flex-item-inner">
            <div class="flex-item-inner-content">
              L2
            </div>
          </div>
        </div>
        <div class="flex-item">
          <div class="flex-item-inner">
            <div class="flex-item-inner-content">
              L3
            </div>
          </div>
        </div>
        <div class="flex-item">
          <div class="flex-item-inner">
            <div class="flex-item-inner-content">
              L4
            </div>
          </div>
        </div>
        <div class="flex-item">
          <div class="flex-item-inner">
            <div class="flex-item-inner-content">
              L5
            </div>
          </div>
        </div>
        <div class="flex-item">
          <div class="flex-item-inner">
            <div class="flex-item-inner-content">
              L6
            </div>
          </div>
        </div>
      </div>
    </div>

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

        Other stuff

  <div>
</body>


.container {
  display: flex;
  flex-direction: row;
  padding: 25px;
  border: 2px red solid;
}

.column {
  width: 100%;
  height: 100%;
  float: left;
}

.flex-container {
  padding: 0;
  font-size: 0;
  border: 1px solid black;
  box-sizing: border-box;
}

.flex-item {
  position: relative;
  display: inline-block;
  height: 0;
  width: 100%;
  padding-top: 100%;
  border: 1px black solid;
  font-size: 20px;
  color: black;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
}
@media (min-width: 480px) {
  .flex-item {
    width: 33.3333%;
    padding-top: 33.3333%;
  }
}
@media (min-width: 768px) {
  .flex-item {
    width: 16.6666%;
    padding-top: 16.6666%;
  }
}
.flex-item-inner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin-right: 25px;
  background: white;
  border: 1px solid red;
  box-sizing: border-box;
}
.flex-item-inner-content {
  border: 1px solid orange;
}

.flex-item:last-child .flex-item-inner {
  margin-right: 0;
  color: green;
}

解决方案

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>

Now, when we add display: flex, we can't use padding with percent (Firefox bug) and we can't use height with percent since we used height: 0.

To overcome these issues when can use viewport units vw instead, and with that we can also use height instead of padding to keep it squared.

So instead of setting a width like this, calc((100% / 6) - 10px);, to spread 6 items equally with a gutter about 10px wide, we use viewport units like this calc(( (50vw - 65px) / 6) - 10px);

The 50vw is half the browser width, the 65px is the sum of the container's left/right padding, 50px, plus the 15px gutter between the columns.

This also allows us to skip the extra flex-item-inner element, skip using position: absolute on the content element, and, as we didn't use percent for the height on the flex-item, we can do like this to center the content

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

And the end result is this

Fiddle demo

Stack snippet

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

这篇关于响应方形Div跨浏览器兼容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！