当添加两个flex项目时,我希望箭头插入它们之间(请运行代码)。对于它们之间添加的每个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>