垂直方向の高さが増加した場合に、div を下ではなく上に拡張するにはどうすればよいですか?

Question

タイトルといくつかのコンテンツを含むページがあります。ヘッダーは動的な値であり、内容に応じてさまざまな内容を含めることができます。この問題は、タイトルが長く、2 行以上必要な場合に発生します。コンテンツを垂直方向と水平方向の位置を同じにしておきたいので、タイトルが短い場合は、長いタイトルの最後の行を最初の行と同じ垂直方向の位置に配置したいと考えています。

他の人に自分自身を理解してもらえることを願っています。 2 番目の単語を追加してタイトルを編集してみてください。そうすれば、私の言いたいことがわかるでしょう。

この問題は flex-box で解決できると思いますが、方法がわかりません。flex-end などでさまざまなことを試しました。

これは私のコード例です:

リーリー リーリー

＃＃＃前もって感謝します！

＃＃＃＃＃＃編集＃＃＃ これは私の目標を示す下手な画像です。 左側の図はタイトルが 1 行の場合、2 番目の図はタイトルが 2 行の場合です。

Answer 1

.wrapper クラスの CSS を変更します:

リーリー

ここでは、display:grid を使用してグリッド レイアウトを作成します。 Grid-template-rows プロパティは、タイトル用とコンテンツ用の 2 つの行を定義します。 auto 値を指定するとヘッダー行がコンテンツの高さに合わせて調整され、1fr 値を指定するとコンテンツ行が残りのスペースを占めるようになります。 align-items プロパティと justify-items プロパティは、それぞれの行内のコンテンツを中央に配置します。

ここで、h1 要素に className 属性ではなく class 属性が含まれるように HTML を更新します。

リーリー

これらの変更により、ヘッダーの長さに関係なく、ヘッダーはラッパーの上に残り、コンテンツは同じ垂直位置と水平位置に残ります。タイトルのテキストを変更してテストし、さまざまな長さでどのように機能するかを確認できます。