jquery - 显示 flex 导致混合间距问题

标签 jquery html css flexbox

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

enter image description here

如您所见,框组的底线与第一行的间距不同。我的标记如下。请注意,我只包含了父元素和一个子元素。

<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;。或者您可以更改 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>

关于jquery - 显示 flex 导致混合间距问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44582985/

相关文章:

html - 在不使用 rowspan 的情况下创建语义正确的表

html - Chrome 和 Firefox 的布局差异,与 float 和显示有关 : table

jquery - 避免第一次加载图像

javascript - 按图库中的图像分辨率排序

javascript - 尼斯选择 JS : Drop up the list

html - 为什么 w3 验证器会检查 &lt;script&gt; 标记并引发错误?

jquery - 水平 float Accordion

jQueryUI 可删除 : over and out callback firing out of sequence

javascript - Jquery数据表页码问题

jquery - Bootstrap 导航栏下拉菜单部分隐藏在 IE8 中 - 为什么?