被其他弹性物品包围时，将弹性物品放在容器中
我有一个伸缩框（请参见下面的示例片段）。
我想进行设置，以便在所有情况下，<h2>都位于 弹性框 的中心，其他跨度将根据其标记在其周围流动。
我基本上是在寻找align-selfCSS代码，但在寻找主轴，而不是在交叉轴这可能有助于解释我的要求）。
我也正在申请margin:auto;我的<h2>，这是我在阅读本文后了解到的（很棒的页面，但仍然让我提出以下问题-除非我不完全理解所有问题）。
这是我得到的代码：
.container {
align-items: center;
border: 1px solid red;
display: flex;
justify-content: center;
width: 100%;
}
h2 {
margin: auto;
]
<div class="container">
<h2>I'm an h2</h2>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
<h2>I'm an h2</h2>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<h2>I'm an h2</h2>
<span>I'm span 3</span>
</div>
为了充分重申我的问题：我想知道如何中心在
<h2>我的网页上，这样在以往任何时候其他<span>s为中，<h2>将始终处于 死
柔性盒的中心。
谢谢。
PS我愿意使用JS和jQuery，但更愿意使用纯CSS的方式来实现这一点。
更新
他的回答让我思考。尽管我还没有找到解决方法，但我相信以下是朝正确方向迈出的一步：
HTML
<div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
</div>
CSS
.container div {
flex: 1 1 auto;
text-align: center;
}
h2 {
flex: 0 0 auto;
margin: auto;
}
.container {
align-items: center;
border: 1px solid red;
display: flex;
justify-content: center;
width: 100%;
}
.container div {
flex: 1 1 auto;
text-align: center;
}
h2 {
flex: 0 0 auto;
margin: auto;
}
<div class="container">
<div>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
</div>
<div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
</div>
<div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 3</span>
</div>
</div>
从根本上说，理论上说，虽然合计<span>s的数量未知，但已知总共会有三个元素：<div><h2><div>
正如您在上面的代码段中所看到的，我已经尝试了（flex: 0 0 auto和flex:11auto等）使其正常工作，但没有成功。任何人都可以给我一些见解，以了解这是否是朝正确方向迈出的一步，以及如何将其推向实际产品？
再次感谢你。
问题答案：
Flex对齐属性通过在容器中分配可用空间来工作。
因此，当一个弹性项目与其他项目共享空间时，没有单步方法将其居中， 除非两个兄弟姐妹的总长度相等 。
在您的第二个示例中，跨度的总长度在的两侧相等h2。结果，它们h2完美地位于容器的中心。
.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
<h2>I'm an h2</h2>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
<p><span>TRUE CENTER</span></p>
只要记住，该中心h2与justify-content: center（或space-around或space- between），只能因为双方平等的平衡。两侧差异的每个像素都将h2产生相称的误差。
在您的第一个和最后一个示例中，双方之间显然存在不平衡。标准对齐属性（例如justify-content和）margin将不起作用，因为它们在
可用空间 而不是 总空间中 居中。
您可以在两侧插入重复的跨度，visibility: hidden以达到相等的平衡。但是，这会增加语义上毫无价值的元素，从而使您的标记变得肿。
相反，如果您有能力计算每个跨度的宽度，则可以插入伪元素以实现相等的平衡。
.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
span {
flex: 0 0 75px;
border: 1px dashed black;
box-sizing: border-box;
}
div.container:first-child::before {
content: "";
width: 225px;
}
.container:nth-child(2)::after {
content: "";
width: 75px;
}
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; border: none; }
<div class="container">
<h2>I'm an h2</h2>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<h2>I'm an h2</h2>
<span>I'm span 3</span>
</div>
<p><span>TRUE CENTER</span></p>
最终，作为CSS的不得已而为之，您可以h2使用绝对定位来居中。这将从文档流中删除该元素，但始终使其始终完美地位于容器的中心。
.container {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
position: relative; /* NEW */
height: 50px;
}
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
}
.container:nth-child(1) { justify-content: flex-end; }
.container:nth-child(2) > span:nth-of-type(4) { margin-left: auto; }
.container:nth-child(3) > span:nth-of-type(2) { margin-right: auto; }
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
<div class="container">
<h2>I'm an h2</h2>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
<h2>I'm an h2</h2>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<h2>I'm an h2</h2>
<span>I'm span 3</span>
</div>
<p><span>TRUE CENTER</span></p>
更新 （基于修订后的问题）
基本上，理论是，虽然合计
<span>s的数量未知，但已知总共会有三个元素：<div><h2><div>。
因此，如果我们知道总会有三个元素，那么就有一个使用flex属性的潜在解决方案。
.container {
display: flex;
}
.container > * {
flex: 1; /* KEY RULE */
}
h2 {
text-align: center;
margin: 0;
}
.container > div {
display: flex;
justify-content: space-around;
}
/* non-essential decorative styles */
.container { background-color: lightgreen; border: 1px solid #ccc; padding: 5px; }
.container > * { border: 1px dashed red; }
p { text-align: center;}
p > span { background-color: aqua; padding: 5px; }
<div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
</div>
<p><span>TRUE CENTER</span></p>
这是正在发生的事情：
- 这三个元素是flex项目，因为它们的父项是flex容器
- 每个项目都有一个
flex: 1，使它们在它们之间平均分配容器空间。最终结果是三个宽度相等的项目。 - 现在，将
h2文本居中于h2元素中还将使文本居中于容器中。 - 可以将每个div做成一个嵌套的flex容器，并且可以将span与flex属性对齐。
-
问题内容： 样品： 我有两个问题，请： 为什么基本上会发生这种情况？ 什么是正确的方法，以防止其拉伸而不影响flex容器中的其他flex项目？ 问题答案： 您不想拉伸高度跨度吗？ 您可能会影响一个或多个弹性项目，而不会拉伸容器的整个高度。 要影响容器的所有弹性项目，请选择以下选项： 您必须设置为，并且该容器的所有弹性项目都将获得其内容的高度。 要仅影响单个flex-item，请选择以下选项： 如果
-
问题内容： 我正在尝试制作多个具有相同高度的正方形行（每行3个）。 我为此编写了一些HTML和CSS，但所有框都在同一行上。 这是我到目前为止的内容： 当我用此页面加载页面时，所有框都出现了，但它们都在一行上，超过了父div的100％宽度。 任何帮助深表感谢。 问题答案： flex容器的初始设置为 。 这意味着，当您创建一个伸缩容器（通过应用元素或将其应用于元素）时，所有子元素（“伸缩项”）都限于
-
我的Flex项目有问题我尝试创建相同高度的Flex容器，但它不起作用，现在有人知道我尝试使用Flex:1和其他属性时会出现什么问题，但它不起作用这里是我的示例代码： 样本布局
-
问题内容： 我有一个flex项目，它也是一个flex容器，问题是即使添加了，它的flex项目也拒绝包装。 谁能为我解决这个问题，或指出我做错了什么。 问题答案： 嵌套容器中的伸缩项目按 百分比 调整大小。 由于百分比长度基于父级的长度，因此 没有理由进行包装 。它们将始终是父级的40％，即使父级的宽度为1％。 如果您使用其他长度单位，例如或，它们将自动换行。
-
问题内容： 我想知道是否有可能使弹性项目与同一容器中的较大弹性项目水平对齐。使用CSS浮点数将很容易实现，但是我无法通过flex项来完成它。 网格布局 的CSS 问题答案： 您可以通过嵌套flex容器来实现布局。 HTML CSS
-
问题内容： 我正在寻找最简单的方法斑马条纹以下响应式弹性框表上的行。 换句话说，在此示例中，第2行和第4行是无限的，我不知道会有多少行，因为这是CMS系统中可重用的组件。 HTML不能更改，但是行和列的数量会经常更改。我很乐意为列而不是行设置限制。 有没有办法在纯CSS中做到这一点？ 问题答案： 理想情况下，所需的选择器将定位属性中包含的偶数值。像这样： 基本上，该幻想选择器说： 使用 包含 （）