Centrer les éléments flexibles dans un conteneur lorsqu'ils sont entourés d'autres éléments flexibles
<p>J'ai une flexbox (voir l'extrait de code ci-dessous à titre d'exemple). </p>
<p>Je souhaite le configurer de manière à ce que dans tous les cas, <code><h2></code> soit au centre de la <strong>flex-box</strong> circulera autour de lui, en fonction de leur balisage. </p>
<p>Je recherche essentiellement le code CSS <code>align-self</code>, mais pour l'axe principal, pas pour l'axe horizontal (ce qui pourrait aider à expliquer ce que je demande). </p>
<p>J'ai également appliqué <code>margin: auto;</code> à mon <code><h2></code> 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). </p>
<p>Voici le code que j'obtiens : </p>
<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 % ;
}
h2 {
marge : auto ;
]</code></pre>
<pre class="snippet-code-html lang-html Prettyprint-override"><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></pre>
</p>
<blockquote>
<p>Pour reformuler complètement ma question : je souhaite savoir comment centrer <code><h2></code> sur ma page afin que, peu importe les autres<code><span></ où code>, <code><h2></code> sera toujours au <strong>point mort</strong> </p>
</blockquote>
<p>P.S. : Je suis prêt à utiliser JavaScript et jQuery, mais je préfère une manière purement CSS de procéder. </p>
<heure/>
<p>Après la réponse de Michael Benjamin :</p>
<p>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 : </p>
<p><strong>HTML</strong></p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false;">.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></pre>
<pre class="snippet-code-html lang-html Prettyprint-override"><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></pre>
</p>
<p>Fondamentalement, la théorie est que même si le nombre total de <code><span></code> est connu, il y a trois éléments au total : <code><div>< ;h2> <div></code></p>
<blockquote>
<p>Comme vous pouvez le voir dans l'extrait de code ci-dessus, j'ai essayé (<code>flex: 0 0 auto</code> et <code>flex: 1 1 auto</code> 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 ? </p>
</blockquote></p>
