一旦成为单列，将对齐内容空间居中

Question

我正在尝试设计一个有两个子元素的div，带有flexbox和flex-wrap，没有媒体查询，在一定的宽度下有空间，但一旦它是一个单列居中（而不是目前的一次）它包裹它就像弹性启动）。希望这是有道理的。

我认为这是相关的代码，基本上当它换行时，我希望之间的空间成为中心：

HTML 和 CSS

.content-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 82%;
}

.content h1 {
    min-width: 20rem;
}

.content h6 {
    min-width: 15.5rem;
}

<div class="content-container">
    <div class="content">
        <h1>'content1'</h1>
        <h6>'content2'</h6>
    </div>
</div>

Answer 1

我希望这适合您的需求。因为我不相信有一种方法可以仅使用本机CSS（即没有媒体查询，并且我假设没有JS）来解决您的问题，所以我让自己将其更改为space-between（space-around因为您给出了.content82％，所以没有太多不同之处）。

如果你不想使用space-around，我很难相信有一个没有媒体查询\JS的解决方案。

.content-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.content {
  display: flex;
  flex-wrap: wrap;
  place-items: center;
  justify-content: space-around;
  width: 100%;
}

h1 {
  width: min-content;
}

h6 {
  width: min-content;
}

<div class="content-container">
    <div class="content">
        <h1 class="content__1">'content1'</h1>
        <h6 class="content__2">'content2'</h6>
    </div>
</div>