Zentrieren Sie flexible Elemente in einem Container, wenn sie von anderen flexiblen Elementen umgeben sind

Question

Ich habe eine Flexbox (siehe Codeausschnitt unten als Beispiel).

Ich möchte es so einrichten, dass sich

in der Mitte der flex-box befindet wird es umfließen, basierend auf ihrem Markup.

Ich suche grundsätzlich nach dem CSS-Code align-self, aber nach der Hauptachse, nicht nach der horizontalen Achse (was helfen könnte, zu erklären, wonach ich frage).

Ich habe auch margin: auto; auf meinen

angewendet, was ich nach dem Lesen dieses Artikels gelernt habe (eine großartige Seite, aber es ist immer noch so). lässt mich mit meinen folgenden Fragen zurück - außer dass ich nicht alles ganz verstehe).

Das ist der Code, den ich bekomme:

<code>.container {
  align-items: center;
  Rand: 1 Pixel durchgehend rot;
  Anzeige: Flex;
  rechtfertigen-Inhalt: Mitte;
  Breite: 100 %;
}
h2 {
  Rand: automatisch;
]</code>

<code><div class="container">
  <h2>Ich bin ein h2</h2>
  <span>Ich bin Span 1</span>
  <span>Ich bin Span 2</span>
  <span>Ich bin 3 Jahre alt</span>
</div>
<div class="container">
  <span>Ich bin Span 1</span>
  <span>Ich bin Span 2</span>
  <span>Ich bin 3 Jahre alt</span>
  <h2>Ich bin ein h2</h2>
  <span>Ich bin 4</span>
  <span>Ich bin 5 Jahre alt</span>
  <span>Ich bin 6 Jahre alt</span>
</div>
<div class="container">
  <span>Ich bin Span 1</span>
  <span>Ich bin Span 2</span>
  <h2>Ich bin ein h2</h2>
  <span>Ich bin 3 Jahre alt</span>
</div></code>

Um meine Frage noch einmal vollständig zu formulieren: Ich möchte wissen, wie ich

auf meiner Seite zentrieren kann, sodass egal welcher andere,

befindet sich immer im Totpunkt

P.S.: Ich bin bereit, JavaScript und jQuery zu verwenden, aber ich bevorzuge dafür eine reine CSS-Methode.

Nachdem Michael Benjamin geantwortet hatte:

Seine Antwort brachte mich zum Nachdenken. Obwohl ich noch keine Möglichkeit gefunden habe, dies zu tun, glaube ich, dass Folgendes ein Schritt in die richtige Richtung ist:

HTML

<div class="container">
  <div>
    <span>Ich bin Span 1</span>
    <span>Ich bin Span 2</span>
    <span>Ich bin 3 Jahre alt</span>
  </div>
  <h2>Ich bin ein h2</h2>
  <div>
    <span>Ich bin 4</span>
    <span>Ich bin 5 Jahre alt</span>
    <span>Ich bin 6 Jahre alt</span>
  </div>
</div>

CSS

.container div {
  Flex: 1 1 Auto;
  Textausrichtung: Mitte;
}
h2 {
  Flex: 0 0 automatisch;
  Rand: automatisch;
}

<code>.container {
  align-items: center;
  Rand: 1 Pixel durchgehend rot;
  Anzeige: Flex;
  rechtfertigen-Inhalt: Mitte;
  Breite: 100 %;
}
.container div {
  Flex: 1 1 Auto;
  Textausrichtung: Mitte;
}
h2 {
  Flex: 0 0 automatisch;
  Rand: automatisch;
}</code>

<code><div class="container">
  <div>
  </div>
  <h2>Ich bin ein h2</h2>
  <div>
    <span>Ich bin Span 1</span>
    <span>Ich bin Span 2</span>
    <span>Ich bin 3 Jahre alt</span>
  </div>
</div>
<div class="container">
  <div>
    <span>Ich bin Span 1</span>
    <span>Ich bin Span 2</span>
    <span>Ich bin 3 Jahre alt</span>
  </div>
  <h2>Ich bin ein h2</h2>
  <div>
    <span>Ich bin 4</span>
    <span>Ich bin 5 Jahre alt</span>
    <span>Ich bin 6 Jahre alt</span>
  </div>
</div>
<div class="container">
  <div>
    <span>Ich bin Span 1</span>
    <span>Ich bin Span 2</span>
  </div>
  <h2>Ich bin ein h2</h2>
  <div>
    <span>Ich bin 3 Jahre alt</span>
  </div>
</div></code>

Grundsätzlich besteht die Theorie darin, dass die Gesamtzahl der zwar unbekannt ist, es aber insgesamt drei Elemente gibt:

< ;h2> < div>

Wie Sie im Codeausschnitt oben sehen können, habe ich versucht (flex: 0 0 auto und flex: 1 1 auto etc.) zu lassen Es funktioniert, hat aber noch nicht funktioniert. Kann mir jemand sagen, ob dies ein Schritt in die richtige Richtung ist und wie ich dies in ein tatsächliches Produkt umsetzen kann?

Answer 1

一种方法是在两侧添加空跨度，然后将跨度和 h2 设置为某个弹性值，如下所示：

.container {
  align-items: center;
  border: 1px solid red;
  display: flex;
  justify-content: center;
  width: 100%;
}
h2 {
  margin: auto;
  text-align: center;
  flex: 3 0;
}
span{
  flex: 1 0;
}

<div class="container">
<span></span>
<span></span>
<span></span>
  <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>
  <span></span>
  <h2>I'm an h2</h2>
  <span>I'm span 3</span>
  <span></span>
  <span></span>
</div>

所以你保证两边的空间相等。那么唯一的问题是您必须确定您希望 h2 采用多少宽度。

Answer 2

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

因此，当一个 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>