顯示器彎曲會導致混合間距問題

Question

我已經使用flex來獲得以下外觀和感覺。

正如你所看到的組箱子的底線有不同的間距比第一行。我的標記如下。請注意，我只包含父元素和一個子元素。

<div class="wr-operations"> 
    <a class="operation-icon text-center ripple"> 
     <i class="fw fw-dial-up icon fw-3x"></i> 
     <span>Ring</span> 
    </a> 
</div> 

css的內容如下。

.wr-operations{ 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    justify-content: space-between; 
} 

.operation-icon { 
    width: 88px; 
    height: 100px; 
    float: left; 
    cursor: pointer; 
    position: relative; 
    margin: 0px 0px 10px 0px; 
    font-size: 12px; 
    background: #fafafa; 
    padding: 2px 10px 10px 10px; 
} 

我的問題是如何對齊底線作爲第一個！內容應該保留在第二行。

Answer 1

嘗試刪除justify-content: space-between;或您可以更改justify-content: flex-start;（默認爲flex-start）。justify-content屬性定義瀏覽器如何在其容器的主軸上分配內容項之間和周圍的空間。

.wr-operations{ 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    /*justify-content: space-between;*/ 
 
} 
 

 
.operation-icon { 
 
    width: 88px; 
 
    height: 100px; 
 
    
 
    float: left; 
 
    cursor: pointer; 
 
    position: relative; 
 
    margin: 10px 10px 10px 10px; 
 
    font-size: 12px; 
 
    background: #fafafa; 
 
    padding: 2px 10px 10px 10px; 
 
}

<div class="wr-operations"> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
\t <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
\t 
 
\t <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
\t <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
\t <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
\t <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
\t <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
\t 
 
\t <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
\t <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
\t 
 
\t <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
</div>

Answer 2

刪除所述浮體和位置的相對的圖標。

.wr-operations{ 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: space-between; 
 
    width: 550px; 
 
} 
 

 
.operation-icon { 
 
    width: 88px; 
 
    height: 100px; 
 
    cursor: pointer; 
 
    font-size: 12px; 
 
    background: #fafafa; 
 
    padding: 2px 10px 10px 10px; 
 
    margin: 0 0 5px 0; 
 
}

<div class="wr-operations"> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
    <a class="operation-icon text-center ripple"> 
 
     <i class="fw fw-dial-up icon fw-3x"></i> 
 
     <span>Ring</span> 
 
    </a> 
 
</div>