javascript - 当被其他 flex 元素包围时，容器中的中心 flex 元素

Question

我有一个 flex-box(示例见下面的代码片段)。

我想设置它，以便在所有情况下，<h2>位于 flex-box 的中心，其他 span 将根据它们的标记围绕它流动。

我基本上是在寻找 align-self CSS 代码，但用于主轴，而不是横轴(this 可能有助于解释我的问题)。

我也在申请margin: auto;到我的<h2> ，这是我在阅读后了解到的 this (一个很棒的页面，但它仍然留给我以下问题——除非我没有完全理解它)。

这是我得到的代码:

.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>

To fully reiterate my question: I want to know how to center the <h2> on my page so that where ever the other <span>s are, the <h2> will always be in the dead center of the flex-box.

P.S.:我愿意使用 JavaScript 和 jQuery，但我更喜欢纯 CSS 的方式来实现这一点。

---

在 an answer by Michael Benjamin 之后:

他的回答让我开始思考。虽然我还没有找到执行此操作的方法，但我相信以下是朝着正确方向迈出的一步:

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>

As you can see in my above snippet, I have tried (flex: 0 0 autoand flex: 1 1 auto, etc.) to get it to work but have not been successful. Can anyone give me some insight as to if this is a step in the right direction and maybe how to push it through to an actual product?

Answer 1

Flex 对齐属性通过分配容器中的可用空间来工作。

因此，当一个 flex 元素与其他元素共享空间时，没有单步方法可以使它居中，除非两边的 sibling 的总长度相等。

在您的第二个示例中，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 在对边插入重复的跨度达到平等的平衡。但这会使您的标记中包含语义上毫无值(value)的元素。

相反，如果您有能力计算每个跨度的宽度，则可以插入伪元素来实现相等的平衡。

.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>

---

更新(基于修改后的问题)

Basically, the theory is that while the amount of total <span>s are unknown, what is known is that there will be a total of three elements: <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 属性对齐。

---

更多信息和解决方案:

• Center and right align flexbox elements
• Keep the middle item centered when side items have different widths