兼容Square Divs跨浏览器兼容

小编典典

兼容Square Divs跨浏览器兼容

css

我的页面宽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
```
.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;
}

阅读 325

2020-05-16

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

现在，当我们添加时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>

2020-05-16