Items are not getting wrapped on adding more items with flex-wrap property

I want the items added to wrap around and get added to next row and not scroll to right side.

The items wrap to next row if I do not use button to add list items and just add items manually to li. I have used the flex-wrap: wrap property of flex-box.

$('#clickMe').click(function() {
    $('#ticketsDemosss').append($('<li  class="flex-item">').text('sds'));
});
.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;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}
ul li{
  display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="viewbranchcontact-2">
<ul id="ticketsDemosss" class="flex-container">
<!-- add LI here -->
</ul>
</dl>

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

Answers 1

  • You need to add display: inline-flex; box-sizing: border-box; .in flex-item class

    $('#clickMe').click(function() {
        $('#ticketsDemosss').append($('<li  class="flex-item">').text('sds'));
    });
    .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;
        line-height: 150px;
        color: white;
        font-weight: bold;
        font-size: 3em;
        text-align: center;
        
        display: inline-flex;
        box-sizing: border-box;
    }
    ul li{
      display: inline;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <dl id="viewbranchcontact-2">
    <ul id="ticketsDemosss" class="flex-container">
    <!-- add LI here -->
    </ul>
    </dl>
    
    <button id="clickMe">Click Me</button>


Related Articles