Display flex 导致混合间距问题答案

【问题标题】：Display flex causes mixed spacing issueDisplay flex 导致混合间距问题
【发布时间】：2017-06-18 19:36:16
【问题描述】：

我使用 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;
}

我的问题是如何将底线对齐为第一条！内容应在第二行左对齐。

【问题讨论】：

尝试删除justify-content: space-between;

标签： jquery html css flexbox

【解决方案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>
	<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>

【讨论】：

一个小问题！如您所见，第一行占据了其父行的整个宽度，第二行也占据了第二行的整个宽度，因此在第二行中产生了间距问题。通过您的修复，项目会向左对齐，但不会占用容器的整个宽度。我怎样才能做到这一点。
@ImeshChandrasiri 尝试flex-grow:1 为.operation-icon

【解决方案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>

【讨论】：