flexを表示すると、スペーシングが混在します。

Question

フレックスを使用して、次のようなルックアンドフィールを得ました。

あなたはボックスのセットの一番下の行を見ることができるように、最初の行とは異なる間隔を有しています。私のマークアップは以下の通りです。私は親要素と子要素を1つだけ含んでいます。

<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; 
} 

私の質問は、最初の行としてどのように揃えるかです。内容は2行目のままにしてください。

Answer 1

あなたがjustify-content: flex-start;を変更することができます.OR justify-content: space-between;を削除してください（デフォルトはフレックススタートである）【選択を正当化-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>