Добавьте несколько элементов в столбец flexbox с помощью jQuery - PullRequest
Новая
       7

Добавьте несколько элементов в столбец flexbox с помощью jQuery

0 голосов
/ 29 мая 2020

У меня есть массив объектов, которые я повторяю. Для каждого объекта я использую jQuery, чтобы создать div (с атрибутом из объекта) и две кнопки. 

        arrayOfObjects.forEach(object => {
            $('.container').append(`<div>${object.attribute}</div> <button>Default</button> <button>Default</button>`);
        })

Все это размещено внутри контейнера flexbox, который должен отображаться как обернутые столбцы (расположение столбцов важно). Другими словами, я ожидаю / хочу это:

Expected

Примечание: мне не нужен перенос строк. Это делает то, что я ожидаю, но, опять же, важно расположение столбцов:

Not rows

Вместо этого я помещаю каждый элемент в отдельный столбец.

Actual

Как сделать так, чтобы он отображался так, как я ожидал / хотел? Возможно ли это вообще?

Это моя текущая настройка: 

<!DOCTYPE html>
<html lang="en">
<head>
    <style type='text/css'>
        .container{
            height: 30vh;
            display: flex;
            flex-flow: column wrap;
        }
    </style>
</head>
<body>
    <div class="container"></div>
</body>
<script type='text/javascript'>
    $(document).ready(function(){
        arrayOfObjects.forEach(object => {
            $('.container').append(`<div>${object.attribute}</div> <button>Default</button> <button>Default</button>`);
        })
    });
</script>
</html>

1 Ответ

1 голос
/ 29 мая 2020

Ваша проблема в этой строке flex-flow: column wrap;. По сути, вы показываете флекс контейнера, но в столбце, в то время как хотите, чтобы он был в строке. Вот как это исправить 

flex-flow: row wrap;

, также вот пример: Пример

...