html - 使用 flex 布局将可变组件与固定宽度组件对齐

Question

我有一个显示一些固定尺寸卡片的弹性布局，当您调整窗口大小时，它会改变每行显示的数量 - 这很棒。

现在我需要这些卡片的多个类别，由标题分隔，我只是无法让标题与卡片很好地对齐。我使用的是中心对齐方式，所以当我将标题设置为 100% 时，它延伸得太远了。希望它只到达第一行的第一张和最后一张卡片，这样标题位置也会随着您调整页面大小而改变。

我在标题组件上尝试了不同的 width 和 flex 值，但运气不佳，但我对其中的大部分内容都很陌生，所以也许还有其他事情可以做？我愿意尝试大多数适用于静态托管站点（使用纯 JS）的东西，除了更改 flexbox 的理由。（我可以将标题的内容居中对齐，但这是最后的手段）。

我在这里设置了一个小提琴：https ://jsfiddle.net/6q8s1u4x/3/ ，但这是其中的基本代码：

.CardFlow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.CardFlowHeader {
    display: block;
    width: 100%;
    padding: 5px 15px;
    
    /* Appearance */
    background-color: #AAAAAA;
    border-color: #000000;
    border-style: solid;
    border-radius: 25px;
}

.Card {
    /* Layout */
    display: block;
    height: 150px;
    width: 200px;
    padding: 10px;
    margin: 5px;
    
    /* Appearance */
    background-color: #6666FF;
    border-color: #000055;
    border-style: solid;
    border-width: 2px;
    border-radius: 25px;
}

<div class="CardFlow">
  <div class="CardFlowHeader">
    <h2>My Header</h2>
  </div>
  <div class="Card">1</div>
  <div class="Card">2</div>
  <div class="Card">3</div>
  <div class="Card">4</div>
  <div class="Card">5</div>
</div>

如果这个jsfiddle还不够，我可以稍后提供截图！谢谢你提供的所有帮助！

标签： htmlcssflexbox