使用 jQuery 将多个元素添加到 flexbox 列中答案

【问题标题】：Add multiple elements into flexbox column with jQuery使用 jQuery 将多个元素添加到 flexbox 列中
【发布时间】：2020-05-29 23:39:04
【问题描述】：

我有一个正在迭代的对象数组。对于每个对象，我使用 jQuery 生成一个 div（具有来自对象的属性）和两个按钮。

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

所有这些都位于一个 flexbox 容器中，该容器将显示为包裹的列（按列排列很重要）。换句话说，我期待/想要这个：

注意：我不想换行。这符合我的预期，但再次强调，按列排列很重要：

相反，我将每个元素放在自己的列上。

我怎样才能使它按我预期/想要的方式显示？有没有可能？

这是我目前的设置：

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

【问题讨论】：

标签： jquery flexbox

【解决方案1】：

您的问题出在flex-flow: column wrap; 这一行。基本上，您正在显示容器 flex，但您希望它在一行中，但在列中。解决方法是这样的

flex-flow: row wrap;

还有一个例子：Exemple

【讨论】：

我没有注意到顺序很重要。这就是为什么它必须是列换行。感谢您指出这一点。
Np，别忘了你可以you can accept this answer