フレックス項目が他のフレックス項目に囲まれている場合、コンテナ内の中央にフレックス項目を配置します
<p>フレックスボックスがあります (例として以下のコード スニペットを参照してください)。 </p>
<p>どのような場合でも、<code><h2></code> が <strong>フレックスボックス</strong> と他のスパンの中央に位置するように設定したいと考えています。マークアップに基づいて、その周りを流れます。 </p>
<p>私は基本的に <code>align-self</code> CSS コードを探していますが、水平軸ではなく主軸を探しています (これは私が求めていることを説明するのに役立つかもしれません)。 </p>
<p>また、この記事を読んだ後に学んだ <code>margin: auto;</code> を <code><h2></code> に適用しました (素晴らしいページですが、それでも次のような質問が残りますが、すべてを完全に理解しているわけではありません)。 </p>
<p>これは私が取得したコードです: </p>
<p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
整列項目: 中央;
境界線: 1 ピクセルの赤一色。
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
幅: 100%;
}
h2 {
マージン: 自動;
]</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container">
<h2>私は h2</h2> です。
<span>私はスパン 1</span>
<span>私はスパン 2</span>
<span>私はスパン 3</span>
</div>
<div class="コンテナ">
<span>私はスパン 1</span>
<span>私はスパン 2</span>
<span>私はスパン 3</span>
<h2>私は h2</h2> です。
<span>私はスパン 4</span>
<span>私はスパン5</span>です。
<span>私はスパン6</span>です。
</div>
<div class="コンテナ">
<span>私はスパン 1</span>
<span>私はスパン 2</span>
<h2>私は h2</h2> です。
<span>私はスパン 3</span>
</div></code></pre>
</p>
<ブロック引用>
<p>質問を完全に言い直すと、他の<code><span></に関係なく、<code><h2></code>をページの中央に配置する方法を知りたいです。 code>、<code><h2></code> は常にフレックスボックスの <strong>死点</strong> に位置します。 </p>
</blockquote>
<p>追記: JavaScript と jQuery を使用するつもりですが、これを行うには純粋な CSS の方法を好みます。 </p>
<p>マイケル・ベンジャミンが答えた後:</p>
<p>彼の答えは私に考えさせました。これを行う方法はまだ見つかりませんが、次のことは正しい方向への一歩であると信じています。 </p>
<p><strong>HTML</strong></p>
<pre class="brush:php;toolbar:false;"><div class="container">
<div>
<span>私はスパン 1</span>
<span>私はスパン 2</span>
<span>私はスパン 3</span>
</div>
<h2>私は h2</h2> です。
<div>
<span>私はスパン 4</span>
<span>私はスパン5</span>です。
<span>私はスパン6</span>です。
</div>
</div></pre>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false;">.container div {
フレックス: 1 1 自動;
テキスト整列: 中央;
}
h2 {
フレックス: 0 0 自動;
マージン: 自動;
}</pre>
<p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
整列項目: 中央;
境界線: 1 ピクセルの赤一色。
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
幅: 100%;
}
.container div {
フレックス: 1 1 自動;
テキスト整列: 中央;
}
h2 {
フレックス: 0 0 自動;
マージン: 自動;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container">
<div>
</div>
<h2>私は h2</h2> です。
<div>
<span>私はスパン 1</span>
<span>私はスパン 2</span>
<span>私はスパン 3</span>
</div>
</div>
<div class="コンテナ">
<div>
<span>私はスパン 1</span>
<span>私はスパン 2</span>
<span>私はスパン 3</span>
</div>
<h2>私は h2</h2> です。
<div>
<span>私はスパン 4</span>
<span>私はスパン5</span>です。
<span>私はスパン6</span>です。
</div>
</div>
<div class="コンテナ">
<div>
<span>私はスパン 1</span>
<span>私はスパン 2</span>
</div>
<h2>私は h2</h2> です。
<div>
<span>私はスパン 3</span>
</div>
</div></code></pre>
</p>
<p>基本的に、この理論では、<code><span></code> の総数は不明ですが、合計 3 つの要素があることがわかっています: <code><div>< ;h2>gt;
<
<ブロック引用>
<p>上記のコード スニペットでわかるように、私は (<code>flex: 0 0 auto</code> や <code>flex: 1 1 auto</code> など) を試してみました。機能しますが、まだ機能していません。これが正しい方向への一歩であるかどうか、またこれを実際の製品に組み込む方法を誰か教えていただけますか? </p>
</blockquote></p>
全員に返信(2)返信します
P粉7262346482023-08-26 12:03:04
1 つの方法は、両側に空のスパンを追加し、次のようにスパンと h2 を弾性値に設定することです。
リーリー
リーリー
したがって、両側のスペースが等しいことを確認します。唯一の問題は、h2 の幅をどれくらいにするかを決定する必要があることです。
返事
0P粉4289867442023-08-26 00:15:33
フレックス配置プロパティは、コンテナ内で利用可能なスペースを割り当てることによって機能します。
したがって、Flex アイテムが他のアイテムとスペースを共有している場合、両側の兄弟アイテムの合計の長さが に等しい場合を除き、Flex アイテムを中央に配置する単一ステップの方法はありません。
2 番目の例
h2 では、両側の合計スパン長は等しいです。したがって、h2 は完全にコンテナーの中央にあります。
