Question

我的页面宽度为50/50。左半部分有一行有六个div。标准：

6个方格必须始终保持正方形。
前5个方格应具有右边的边距/填充以便分离。
所有六个方格必须保持在同一行。如果我可以使用它，我可以在较小的视口中进行必要的响应调整。
跨浏览器兼容最新版本的ie，chrome和firefox。

我的代码：https://codepen.io/johnsontroye/pen/zzNVBr

<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;
}

Answer 1

这里的主要技巧是使div成为正方形。

通常一个设置width，height设置为0，padding设置为width

＆＃13;

.square {
  height: 0;
  width: 33%;
  padding-bottom: 33%;
  background: lightgray;
}

＆＃13;

<div class="square">
  <div>
    Content
  </div>
</div>

＆＃13;

现在，当我们添加display: flex时，我们无法使用padding百分比（Firefox错误），因为我们使用了{{1}，我们无法使用百分比高度}。

要在可以使用视口单元height: 0的情况下解决这些问题，我们也可以使用vw代替height来保持平方。

因此，我们不是设置这样的宽度padding，而是使用大约10px宽的装订线平均传播6个项目，而是使用像calc((100% / 6) - 10px);这样的视口单元

calc(( (50vw - 65px) / 6) - 10px);是浏览器宽度的一半，50vw是65px左/右填充，container加上50px的总和{1}} 15px。

之间的排水沟

这也允许我们跳过额外的columns元素，跳过flex-item-inner元素上的position: absolute，并且，因为我们没有使用百分比作为content，我们可以这样做来集中内容

flex-item

最终结果就是这个

Fiddle demo

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这对于一些相当简单的代码是可行的，只要父列的宽度在50％-ish处是一致的，并且正方形之间的空间不必严格等于某个值。 vw（视口宽度百分比）单位允许将一致的大小应用于元素的宽度和高度。

这是一个例子，我将其归结为最少的元素，并且一些注释有助于将其移动到您的代码库中。

尝试使用.flex-item的{{1}}和height（flex-basis的第三个值）来获得您喜欢的尺寸。
不需要flex或padding值，因为margin有助于我们计算。
使用等于justify-content: space-between; line-height的{{1}}，可以使height和.flex-item的内部元素居中。

display: inline-block;

vertical-align: middle;

Answer 3

仅限最新的浏览器？ CSS Grid救援！它在最新版本中得到了很大的支持。您可能还需要一些供应商前缀;查看CanIUse了解详情。

这里是叉子：https://codepen.io/jackmakesthings/pen/MoJNNV

＆＃13;

.container {
  display: flex;
  flex-direction: row;
  padding: 25px;
  border: 2px red solid;
}

.column {
  width: 100%;
  height: 100%;
  float: left;
}

.grid-row {
  display: grid;
  grid-gap: 10px; /* set this to whatever space you need between boxes */
  grid-template-columns: repeat(6, 1fr); /* grid autosizes 6 columns */
}

.row-item {
  grid-column: 1 / 7; /* to span the whole row */
  border: 1px solid;
  padding: 10px;
}

.grid-item {
  position: relative;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* This is a nifty trick for getting those fixed aspect ratio boxes. */
.grid-item:before {
  content: '';
  float: left;
  width: 0;
  height: 0;
  padding-bottom: 100%;
}
.grid-item:after {
  display: table;
  clear: both;
}

/* Responsive grid changes? Sure! */

@media (max-width: 1000px) {

  /* We just have to change the grid template: */
  .grid-row {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Unexpected thing I ran into - you also have to change this, or the grid stays big enough to accommodate the old 6-column-sized row-item. Makes sense, but vexed me for a minute!  */
  .row-item {
    grid-column: 1 / 4;
  }
}

＆＃13;

<div class="container">
    <div class="column" style="margin-right: 20px">
      <div class="grid-row">
        <div class="grid-item">L1</div>
        <div class="grid-item">L2</div>
        <div class="grid-item">L3</div>
        <div class="grid-item">L4</div>
        <div class="grid-item">L5</div>
        <div class="grid-item">L6</div>
        <div class="row-item">some other thing</div>
        <div class="row-item">and another</div>
      </div>
    </div>

    <div class="column" style="margin-left: 20px; border: 1px black solid; height: 500px">
      
        Other stuff 
     
  <div>

＆＃13;

响应式Square Divs交叉浏览器兼容

3 个答案: