Centrer les éléments flexibles dans un conteneur lorsqu'ils sont entourés d'autres éléments flexibles

Question

J'ai une flexbox (voir l'extrait de code ci-dessous à titre d'exemple).

Je souhaite le configurer de manière à ce que dans tous les cas,

soit au centre de la flex-box circulera autour de lui, en fonction de leur balisage.

Je recherche essentiellement le code CSS align-self, mais pour l'axe principal, pas pour l'axe horizontal (ce qui pourrait aider à expliquer ce que je demande).

J'ai également appliqué margin: auto; à mon

que j'ai appris après avoir lu cet article (une excellente page, mais elle reste me laisse avec mes questions suivantes - sauf que je ne comprends pas tout).

Voici le code que j'obtiens :

<code>.container {
  aligner les éléments : centre ;
  bordure : 1px rouge uni ;
  affichage : flexible ;
  justifier-contenu : centre ;
  largeur : 100 % ;
}
h2 {
  marge : auto ;
]</code>

<code><div class="container">
  <h2>Je suis un h2</h2>
  <span>Je suis span 1</span>
  <span>Je suis span 2</span>
  <span>Je mesure 3</span>
</div>
<div class="conteneur">
  <span>Je suis span 1</span>
  <span>Je suis span 2</span>
  <span>Je mesure 3</span>
  <h2>Je suis un h2</h2>
  <span>Je mesure 4</span>
  <span>Je mesure 5</span>
  <span>Je mesure 6</span>
</div>
<div class="conteneur">
  <span>Je suis span 1</span>
  <span>Je suis span 2</span>
  <h2>Je suis un h2</h2>
  <span>Je mesure 3</span>
</div></code>

Pour reformuler complètement ma question : je souhaite savoir comment centrer

sur ma page afin que, peu importe les autres,

sera toujours au point mort

P.S. : Je suis prêt à utiliser JavaScript et jQuery, mais je préfère une manière purement CSS de procéder.

Après la réponse de Michael Benjamin :

Sa réponse m'a fait réfléchir. Bien que je n'aie pas encore trouvé de moyen de le faire, je pense que ce qui suit est un pas dans la bonne direction :

HTML

<div class="conteneur">
  <div>
    <span>Je suis span 1</span>
    <span>Je suis span 2</span>
    <span>Je mesure 3</span>
  </div>
  <h2>Je suis un h2</h2>
  <div>
    <span>Je mesure 4</span>
    <span>Je mesure 5</span>
    <span>Je mesure 6</span>
  </div>
</div>

CSS

.container div {
  flex : 1 1 auto ;
  alignement du texte : centre ;
}
h2 {
  flexion : 0 0 automatique ;
  marge : auto ;
}</pré>
<p>

<pre class="snippet-code-css lang-css Prettyprint-override"><code>.container {
  aligner les éléments : centre ;
  bordure : 1px rouge uni ;
  affichage : flexible ;
  justifier-contenu : centre ;
  largeur : 100 % ;
}
.conteneur div {
  flex : 1 1 auto ;
  alignement du texte : centre ;
}
h2 {
  flexion : 0 0 automatique ;
  marge : auto ;
}</code>

<code><div class="container">
  <div>
  </div>
  <h2>Je suis un h2</h2>
  <div>
    <span>Je suis span 1</span>
    <span>Je suis span 2</span>
    <span>Je mesure 3</span>
  </div>
</div>
<div class="conteneur">
  <div>
    <span>Je suis span 1</span>
    <span>Je suis span 2</span>
    <span>Je mesure 3</span>
  </div>
  <h2>Je suis un h2</h2>
  <div>
    <span>Je mesure 4</span>
    <span>Je mesure 5</span>
    <span>Je mesure 6</span>
  </div>
</div>
<div class="conteneur">
  <div>
    <span>Je suis span 1</span>
    <span>Je suis span 2</span>
  </div>
  <h2>Je suis un h2</h2>
  <div>
    <span>Je mesure 3</span>
  </div>
</div></code>

Fondamentalement, la théorie est que même si le nombre total de est connu, il y a trois éléments au total :

< ;h2>

Comme vous pouvez le voir dans l'extrait de code ci-dessus, j'ai essayé (flex: 0 0 auto et flex: 1 1 auto etc.) de laisser Cela fonctionne mais n'a pas encore fonctionné. Quelqu'un peut-il me dire si c'est un pas dans la bonne direction et comment transformer cela en un produit réel ?

Answer 1

Une solution consiste à ajouter des étendues vides des deux côtés, puis à définir l'étendue et h2 sur une valeur de flexion comme celle-ci :

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

Assurez-vous donc que l’espace des deux côtés est égal. Le seul problème est alors que vous devez décider quelle largeur vous voulez que h2 prenne.

Answer 2

Les propriétés d'alignement flexible fonctionnent en allouant l'espace disponible dans le conteneur.

Ainsi, lorsqu'un élément Flex partage de l'espace avec d'autres éléments, il n'existe pas de moyen en une seule étape de le centrer à moins que la longueur totale des éléments frères des deux côtés soit égale.

Dans le deuxième exemple, h2 两侧的跨度总长度相等。因此，h2 est complètement au centre du conteneur.

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