e-Designary e-Designary - 13 days ago 5
CSS Question

aligning the items not working as expected

I need a small help. I've some of the images designed as below. You can see my code here



But I'm not getting the output as expected.

Reference Design

enter image description here

Answer

You can use CSS Flexbox. And include the flex aligning properties to the parent element.

Just like:

.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 */
}

Have a look at the snippet below (use full screen to view it properly):

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

Hope this helps!