フレックスレイアウトでコンテナ内のコンテンツを維持するためのソリューションの詳細な説明

モバイル側では、フレックスレイアウトが非常に便利です。デバイスの幅に応じてコンテナの幅を自動的に調整できます。非常に便利で、ますます欠かせないものになっています。しかし、最近、プロジェクトに取り組んでいるときに問題を発見しました。

つまり、flex:1 が設定されたコンテナーでは、テキストが非常に長い場合、テキストは設定された動的な残りのスペースに留まらず、コンテナーを超えてしまいます。実際のプロジェクトは非常に複雑なので説明するのは難しいので、ここでは問題を次のように簡略化します。

基本的に、フレックス レイアウトのメイン コンテナー、左側に固定の幅と高さのロゴ、右側に動的な幅のコンテンツがあります。

<div class="main">
    <img alt="" class="logo" src="pic.jpg">
    <div class="content">
        <h4 class="name">名前</h4>
        <p class="info">情報</p>
        <p class="notice">これは通知コンテンツです。</p>
    </div>
</div>

。主要 {
    ディスプレイ: フレックス;
}
.ロゴ {
    幅: 100ピクセル;
    高さ: 100px;
    マージン: 10px;
}
。コンテンツ {
    フレックス: 1;
}
.コンテンツ > * {
    空白: ラップなし;
    オーバーフロー: 非表示;
    テキストオーバーフロー: 省略記号;
}

.notice は非常に長くなる可能性があり、一部のデバイスでは非表示にする必要があります。つまり、折り返されず、省略記号... がマークとして残ります。

ここでは、text-overflow: ellipsis が機能せず、省略記号がまったく表示されないことがわかります。また、nowrap が設定されているため、テキストがコンテンツを拡大し、コンテンツが画面を超えてしまうことがわかります。したがって、この問題を解決する必要があります。

親要素 .content の flex: 1 をキャンセルしようとしましたが、機能しませんでした。
.main コンテナの display: flex をキャンセルしようとすると、省略記号が表示されます。

そのため、フレックスレイアウトの問題であると推測され、さらに省略記号によって親要素の幅を制限する必要があるのではないかと推測されます。

親要素 .content に width: 100% を設定しようとしても機能しませんが、width: 0 を設定すると機能します。今すぐ：

。コンテンツ {
    フレックス: 1;
    幅: 0;
}

幅が設定されていない場合、.content は子ノードによって無限に拡張される可能性があります。そのため、.notice には常にすべてのテキストを 1 行に表示するのに十分な幅があり、切り捨て効果はトリガーされません。効果をテストする別の方法があります:

。コンテンツ {
    フレックス: 1;
    オーバーフロー: 非表示;
}

上記の 2 つの方法では、目的の効果が得られます。つまり、コンテンツが flex 1 に設定されている場合、親コンテナーの残りの幅が動的に取得され、独自の子要素によって引き伸ばされることはありません。

テストの結果、次のメソッドは無効です。

html および body 要素に max-width を設定すると、ページ幅が強制されるようです。
body にオーバーフローを設定すると、ページ幅は拡張できませんが、要素の幅は残ります。つまり、要素自体は依然としてオーバーフローします。
html と body に max-width と overflow を同時に設定します。ページの幅は max-width に制限されますが、要素自体は依然としてオーバーフローします。
.main コンテナに overflow: hidden を設定します。同様に、.main はオーバーフローしませんが、.notice 自体はオーバーフローします。
.notice 要素に width または max-width を設定すると、幅は制限されますが、省略記号... が特定の幅で完全に表示されず、2 つのドットだけが表示されることがあります。

フレックスレイアウトでコンテナ内にコンテンツを保持する方法についての記事はこれで終わりです。フレックスレイアウトでコンテナ内にコンテンツを保持する方法の詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。