Javascript 柔性箱双柱包裹

Javascript 柔性箱双柱包裹,javascript,html,css,flexbox,bootstrap-4,Javascript,Html,Css,Flexbox,Bootstrap 4,我试图转换利用flexbox提供2列包装卡 示例: [1] [2] [3] [4] [5] [6] 目前,我不认为这是可能的,因为我目前阅读的所有内容,我能够创建以下内容: [1] [4] [2] [5] [3] [6] 我已经尝试了下面的方法,但不幸的是,我似乎无法让侧对侧选项自动工作 .card列额外设置{ 列数:2; 柱间距:1.25雷姆; 孤儿:1名; 寡妇:1人; 弯曲方向:立柱; 柔性包装:包装; 调整内容:灵活启动; 对齐内容:之间的空间; 调整项目:灵活启动; } .卡片{

我试图转换利用flexbox提供2列包装卡

示例

[1] [2]
[3] [4]
[5] [6]
目前,我不认为这是可能的,因为我目前阅读的所有内容,我能够创建以下内容:

[1] [4]
[2] [5]
[3] [6]
我已经尝试了下面的方法,但不幸的是,我似乎无法让侧对侧选项自动工作

.card列额外设置{
列数:2;
柱间距:1.25雷姆;
孤儿:1名;
寡妇:1人;
弯曲方向:立柱;
柔性包装:包装;
调整内容:灵活启动;
对齐内容:之间的空间;
调整项目:灵活启动;
}
.卡片{
宽度:100%;
位置:相对位置;
显示器:flex;
弯曲方向:立柱;
最小宽度:0;
单词包装:打断单词;
}

换行的卡片标题

这是一张较长的卡片,下面的支持文本是附加内容的自然引入。这个内容有点长

Lorem ipsum dolor sit amet,是一位杰出的献身者。整数赌注

在源代码标题中有名的人 卡片标题

此卡片具有以下支持文本,作为附加内容的自然引入

上次更新是在3分钟前

Lorem ipsum dolor sit amet,是一位杰出的献身者。整数posuere-erat

在源代码标题中有名的人 卡片标题

此卡片具有以下支持文本,作为附加内容的自然引入

上次更新是在3分钟前

Lorem ipsum dolor sit amet,是一位杰出的献身者。整数赌注

在源代码标题中有名的人 卡片标题

这是一张更宽的卡片,下面的支持文本是附加内容的自然引入。这张卡片的内容甚至比第一张要长,以显示等高动作

上次更新是在3分钟前


看起来更像是行而不是列。有什么特别的原因需要列吗?@worc它只需要像示例shhown那样放入两列中,行flex是否可行?flexbox行的顺序是从左到右,但是列的“砌石”效果不起作用,因为flexbox行的高度相同