調整項目不按預期工作

Question

我需要一個小小的幫助。我有一些圖像設計如下。你可以在這裏看到我的代碼

codepen.io/anon/pen/WoEXZN

但我沒有收到輸出符合市場預期。

參考設計

Answer 1

您可以使用CSS Flexbox的。並將柔性對齊屬性包含在父元素中。

就像：

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

希望這有助於！