2つの要素の間の矢印

Question

拡張されたフレックスアイテムを接続する矢印が必要です（クリックするとフレックスアイテムが完全な行に展開されますので、コードを実行してください）。矢印は、展開されていない最後の要素と展開された要素を結ぶ下向き矢印でなければなりません。

2nd element clicked: 
 
    
 
    |--------|      
 
    |  |-----|      1st row     
 
    |1st ele |  |    
 
    |--------|  |  
 
       \/ 
 
    |------------------------| 
 
->|      |-->   2nd row 
 
    |  2nd    | 
 
    |------------------------| 
 
    
 
    
 
    |--------|  |--------|     
 
->|  |----->|  |----->  3rd row   
 
    | 3rd |  | 4th |     
 
    |--------|  |--------|   
 

$('#clickMe').click(function() { 
 
    $('#Demosss').append($('<li class="flex-item">').text('abc')) 
 
    $(this).insertAfter($('[class^="flex-item"]').last()); 
 
}); 
 

 
$(document).on('click', '.flex-item' ,function(){ 
 
    $(this).toggleClass('flexActive') 
 
})

.fulex{ 
 
    display: flex; 
 
    //white-space: nowrap; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
} 
 
.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    //display:none; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; 
 
    /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
// width:600px; 
 
} 
 

 
.flex-item { 
 
    background: green; 
 
    //display:flex; 
 
    padding: 5px; 
 
    width: 100px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    margin-right: 15px; 
 
    margin-bottom:50px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.flexActive { 
 
    width: auto; 
 
    display: block; 
 
    flex: 1 1; 
 
    margin-right: 0; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
} 
 

 
.flex-item { 
 
    margin-left: .75em; 
 
} 
 

 
.flex-item:not(:first-child):before { 
 
    content: '\21E2'; 
 
    color: black; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    transform: translate(-100%, -50%); 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fulex"> 
 

 
<ul id="Demosss" class="flex-container"> 
 

 
<!-- add LI here --> 
 
</ul> 
 

 

 
<button id="clickMe">Click Me</button> 
 
</div>

Answer 1

あなたがflexActiveにCSSプロパティを追加することができ、ターゲット要素の下矢印を追加したいので。

これをCSSに追加します。

.flexActive:after{ 
    content: '\21E2'; 
    color:black; 
    position:absolute; 
    top:-80px; 
} 

FIDDLE