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