六边形网格 CSS：当屏幕尺寸缩小时更改尺寸，使六边形折叠

Question

HTML:

<div id="wrapper">

<div class="hex-row">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
</div>

<div class="hex-row even">
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>

</div>

CSS:

.hexagon {
 position: relative;
 width: 250px;
 height: 144.34px;
 background-color: teal;
 margin: 72.17px 0;
 float: left;
 margin-left: 5.5px;
 margin-bottom: 5.5px;
 }

.hexagon:before,
.hexagon:after {
 content: "";
 position: absolute;
 width: 0;
 border-left: 125px solid transparent;
 border-right: 125px solid transparent;
 }

 .hexagon:before {
  bottom: 100%;
  border-bottom: 72.17px solid teal;
  }

 .hexagon:after {
  top: 100%;
  width: 0;
  border-top: 72.17px solid teal;
  }

  .hex-row {
   clear: left;
  width: 289vh;
  }

  .hex-row.even {
   margin-left: 128px;
   width: 289vh;
   }

示例：https://jsfiddle.net/h74e4s4o/

我只是想让它根据网页大小（或 phone 大小）折叠。例如，当您缩小 window 时，这个会折叠：http://web-tiki.github.io/responsive-grid-of-hexagons/

该示例展示了我希望我的代码执行的操作的完美示例。我在这方面真的很陌生，所以如果有人能真正为我布置它让我更好地理解它，那将非常有帮助！

提前致谢。

Answer 1

Here you go:

#hexGrid {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 2% auto;
  overflow: hidden;
  font-size: 15px;
  list-style-type: none;
}

.hex {
  position: relative;
  visibility: hidden;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
}

.hex::after {
  content: '';
  display: block;
  padding-bottom: 86.602%;
  /* =  100 / tan(60) * 1.5 */
}

.hexIn {
  position: absolute;
  width: 96%;
  padding-bottom: 110.851%;
  /* =  width / sin(60) */
  margin: 0 2%;
  overflow: hidden;
  visibility: hidden;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
  -webkit-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  -ms-transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
  transform: rotate3d(0, 0, 1, -60deg) skewY(30deg);
}

.hexIn * {
  position: absolute;
  visibility: visible;
  outline: 1px solid transparent;
  /* fix for jagged edges in FF on hover transition */
}

.hexLink {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: red;
  -webkit-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  -ms-transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
  transform: skewY(-30deg) rotate3d(0, 0, 1, 60deg);
}


/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/

@media (min-width:1201px) {
  /* <- 5-4  hexagons per row */
  #hexGrid {
    padding-bottom: 4.4%
  }
  .hex {
    width: 20%;
    /* = 100 / 5 */
  }
  .hex:nth-child(9n+6) {
    /* first hexagon of even rows */
    margin-left: 10%;
    /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 1200px) and (min-width:901px) {
  /* <- 4-3  hexagons per row */
  #hexGrid {
    padding-bottom: 5.5%
  }
  .hex {
    width: 25%;
    /* = 100 / 4 */
  }
  .hex:nth-child(7n+5) {
    /* first hexagon of even rows */
    margin-left: 12.5%;
    /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 900px) and (min-width:601px) {
  /* <- 3-2  hexagons per row */
  #hexGrid {
    padding-bottom: 7.4%
  }
  .hex {
    width: 33.333%;
    /* = 100 / 3 */
  }
  .hex:nth-child(5n+4) {
    /* first hexagon of even rows */
    margin-left: 16.666%;
    /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 600px) {
  /* <- 2-1  hexagons per row */
  #hexGrid {
    padding-bottom: 11.2%
  }
  .hex {
    width: 50%;
    /* = 100 / 3 */
  }
  .hex:nth-child(3n+3) {
    /* first hexagon of even rows */
    margin-left: 25%;
    /* = width of .hex / 2  to indent even rows */
  }
}

@media (max-width: 400px) {
  #hexGrid {
    font-size: 13px;
  }
}

<ul id="hexGrid">
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#">


      </a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>
  <li class="hex">
    <div class="hexIn">
      <a class="hexLink" href="#"></a>
    </div>
  </li>


</ul>

六边形网格 CSS：当屏幕尺寸缩小时更改尺寸，使六边形折叠

Hexagon Grid CSS: Change size when screen is sized down so the hexagons collapse

css

grid

responsive