我希望在添加箭头时在两个弹性项目之间插入箭头(请运行代码)。必须在第一个Flex项目之后添加它们之间的每个添加的Flex项目,以便它们通过箭头显示连接。箭头必须位于连接它们的盒子边界的中点(不是盒子中心)。在两个弹性项目之间绘制箭头
$('#clickMe').click(function() {
$('#Demosss').append($('<li class="flex-item">').text('text'))
$(this).insertAfter($('[class^="flex-item"]').last());
});
$(document).on('click', '.flex-item' ,function(){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: green;
padding: 5px;
width: 100px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
.flexActive{
width:auto;
display:block;
flex: 1 1;
margin-right:0;
}
ul li{
display: inline;
}
.enlarge{
zoom: 350%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
<div class="enlarge">
<span>⇢</span>
</div>
喜欢这个? http://codepen.io/anon/pen/vxNEjo –
@MichaelCoker添加它作为答案。并删除最后一个 –