显示flex会导致混合间距问题

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

我使用flex来获得以下外观和感觉。

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.

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

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

我的问题是如何将底线与第一个对齐！内容应该在第二行中保持对齐。

2 个解决方案

#1

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.

尝试删除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>
	<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>

#2

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>