对齐不按预期工作的项目

Question

我需要一点帮助。我有一些设计如下的图像。你可以在这里看到我的代码

codepen.io/anon/pen/WoEXZN

但我没有按预期得到输出。

参考设计

Answer 1

您可以使用 CSS Flexbox 。并将flex aligning属性包含在父元素中。

就像：

.wedding-img {
  display: flex; /* Flex Container */
  flex-wrap: wrap; /* Wrapping Hexagons to next line after a certain width limit is reached */
  justify-content: center; /* Center aligning hexagons horizontally */
  align-items: center; /* Center aligning hexagons vertically */
}

查看下面的代码段（使用全屏正确查看）：

.wedding-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 103px;
}

.hexagon {
  overflow: hidden;
  visibility: hidden;
  width: 260px;
  height: 314px;
  margin: -60px 0 0 0px;
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
  cursor: pointer;
  display: inline-block;
  margin: 1em;
  margin-top: -103px;
}
.hexagon-in1 {
  overflow: hidden;
  width: 100%;
  height: 100%;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.hexagon-in2 {
  width: 100%;
  height: 100%;
  padding: 0px 12px;
  text-align: center;
  background-repeat: no-repeat;
  background: #f1f4f5;
  visibility: visible;
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
  display: table;
}

body {
  margin: 0;
}

<div class="wedding-img">
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
  <div class="hexagon">
    <div class="hexagon-in1">
      <div class="hexagon-in2 groom"></div>
    </div>
  </div>
</div>

希望这有帮助！