css问题你如何让卡片出现顺序答案

【问题标题】：css question how do you make cards appear sequentialcss问题你如何让卡片出现顺序
【发布时间】：2022-07-06 01:40:33
【问题描述】：

我不知道如何正确地提出这个问题，这是一个更形象化的问题。就前端而言，我是个菜鸟。

如果这听起来不错，我正在尝试创建某种应用程序仪表板，但我对它的样式设置有点问题。我尝试的是使用 flex 和 justify 内容中心，是的，如果每一行都充满了图标，那么 flex 可以完美地工作，但是当我只有一个图标时，下一行，那个 1 图标出现在中心，但我希望它出现在开始。这是我试图实现的图像。

[1]：https://i.stack.imgur.com/RFP7g.png[![this 是我现在拥有的][1]][1]

[2]:https://i.stack.imgur.com/irTkR.png[![这就是我所希望的][1]][1]

如果窗口变小，布局也应该保持不变。使用之间的空间，空间均匀等我做不到。我希望这是一个足够的解释，这是我现在的代码。是的，我将 bootstrap 5 用于类容器和 mt5

function Home(){

return(
    <div class="container mt-5 color rm-margin">
        <div class="iconWrapper">
        <ComponentCard caption="hello" onClick={() => console.log("clicked")}/>
        <ComponentCard caption="this"/>
        <ComponentCard caption="is"/>
        <ComponentCard caption="an"/>
        <ComponentCard caption="attempt"/>
        <ComponentCard caption="success"/>
        <ComponentCard caption="hello"/>
        <ComponentCard caption="this"/>
        <ComponentCard caption="is"/>
        <ComponentCard caption="an"/>
        <ComponentCard caption="attempt"/>
        
       
        </div>
    </div>
)

}

.iconWrapper{
display: flex;
flex-wrap: wrap;
justify-content:center;
text-align: left;
}
.iconAlign{
    text-align: center;
    margin-left: 30px;
    margin-right: 30px;
}
.color{
    background-color: yellow;
}

【问题讨论】：

当您从 .iconWrapper 中删除 justify-content:center; 时会发生什么——在我看来，这两个图像之间的唯一区别..
space-between 和 space-evenly 都是“面向中心的”，如果这有意义的话。 flex-start 和 flex-end 看着侧面，而前两个从中间做他们的事情。这就是为什么它不适合你。

标签： html css frontend

【解决方案1】：

问题是你正在做justify-content: center，这使得你的第二行（和你的第一行）将所有内容都对齐到中心而不是开始。

我建议将您的 iconWrapper 居中在您的主容器中（使用 flexbox 或自动边距或任何其他方式），然后将 iconWrapper CSS 更新为 justify-content: flex-start。

【讨论】：