Css 如何更改flexbox包装？
在我的应用程序中，我有一个具有动态渲染卡的响应flexbox（每个api调用渲染1-10张卡）。除了包装方式，它几乎完全符合我的要求 假设我渲染了10张卡片，如果我调整屏幕大小，使其变成例如4-4-2，最后两张卡片居中，我希望它包裹起来，使最后两张卡片从左边开始，间距与上面的卡片相同。你怎么能做到 编辑以进一步细化：假设我将尺寸进一步调整为1-1-1-1-1-1-1-1-1-1-1，卡片应居中显示，我仍然需要居中，但如果最后两张卡片变成4-4-2或3-3-2等，我希望最后两张卡片从左侧缠绕Css 如何更改flexbox包装？,css,flexbox,Css,Flexbox,在我的应用程序中，我有一个具有动态渲染卡的响应flexbox（每个api调用渲染1-10张卡）。除了包装方式，它几乎完全符合我的要求 假设我渲染了10张卡片，如果我调整屏幕大小，使其变成例如4-4-2，最后两张卡片居中，我希望它包裹起来，使最后两张卡片从左边开始，间距与上面的卡片相同。你怎么能做到 编辑以进一步细化：假设我将尺寸进一步调整为1-1-1-1-1-1-1-1-1-1-1，卡片应居中显示，我仍然需要居中，但如果最后两张卡片变成4-4-2或3-3-2等，我希望最后两张卡片从左侧缠绕
.card{
文本对齐：居中；
盒影：0 1px 3px 0#d4d5，0 0 1px#d4d5；
最大宽度：300px；
保证金：2rem；
垫底：1毫米；
}
.集装箱{
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}
.配方网格{
显示器：flex；
柔性包装：包装；
调整内容：周围的空间
}
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
.recipe-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start
}
如果需要，可以在卡片上添加边距。如果要使用Flexbox，并且不使用脚本，可以创建重影元素，以便它们填充最后一行的空间 因此，对于可能的列长度4，您需要3个ghost元素，以此类推 也可以使用伪元素，这将使所需的重影减少2
.card{
文本对齐：居中；
盒影：0 1px 3px 0#d4d5，0 0 1px#d4d5；
最大宽度：300px；
保证金：2rem；
垫底：1毫米；
}
.卡片：空{
宽度：300px；
盒影：无；
保证金：2rem；
填充底部：0；
}
.集装箱{
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}
.配方网格{
显示器：flex；
柔性包装：包装；
调整内容：周围的空间
}
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
鸡蛋牛肉三明治
604千卡-完全纯素
。卡：最后一个子{margin right:auto；}