javascript - 单击按钮增加 flex 元素的大小

Question

我想添加一个功能，这样当我单击 flex-item 时，它必须扩展到它下面的完整行的大小。当我点击它时基本上会增加它的大小，当我再次点击它时会恢复到以前的大小。

后续的 元素 必须保持相同的大小，并在展开点击的 flex-item 后移动到下一行，并遵循 flex-box 的相同属性。 flex-items 必须是可点击的元素，点击时会展开并在再次点击时恢复到相同大小。

我无法弄清楚这一点，而且我是前端技术的新手。

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

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-flex-direction: row; /* Safari */
    flex-direction:  row;
    flex-wrap:  wrap;
}
.flex-item {
    background: tomato;
    padding: 5px;
    width: 200px;
    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;
    
}
ul li{
  display: inline;
}

<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>

Answer 1

您可以在点击时切换类。

var i = 1; // just for differentiate divs
$('#clickMe').click(function() {
    $('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar-'+i));
    $(this).insertAfter($('[class^="flex-item"]').last());
    i++
});

$(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: tomato;
    padding: 5px;
    width: 200px;
    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;
    
}
ul li{
  display: inline;
}
.flexActive{
  width:auto;
  display:block;
  flex: 1 1;
  margin-right:0;
}

<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>