Display flex causes mixed spacing issue

Question

I've used flex to get the following look and feel.

As you can see the bottom line of the set of boxes have different spacing than the first row. My markup is as following. Note that I've only included the parent element and one child element.

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

The css goes as following.

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

My question is how to align the bottom line as the first one! the content should left align in the second line.

try remove `justify-content: space-between;` – XYZ Jun 16 '17 at 07:14 — XYZ, Jun 16 '17 at 07:14

score 1 · Accepted Answer · answered Jun 16 '17 at 07:17

Try remove justify-content: space-between;.or you can change justify-content: flex-start; (default is flex-start).The justify-content property defines how the browser distributes space between and around content items along the main axis of their container.

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

One small question! As u can see the first line occupies the entire width of its parent and the second as well, thus making the spacing issue in the second line. With your fix, the items get aligned to left but does not take the entire width of the container. How can I get this achieved. — Imesh Chandrasiri, Jun 16 '17 at 07:59

score 0 · Answer 2 · answered Jun 16 '17 at 07:20

Remove the float and position relative for the icons.

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

Display flex causes mixed spacing issue

2 Answers2