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

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

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

つまり、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 をよろしくお願いいたします。

<<:  ORM モデル フレームワークを使用して MySQL データベースを操作する方法

>>:  vue-cropper を使用して vue で写真をトリミングする方法をご存知ですか?

推薦する

カルーセル例の JavaScript 実装

この記事では、カルーセルの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

Ubuntu で起動時に自動的に起動するシェル スクリプトを作成する (推奨)

スクリプトを書く目的は、さまざまなサービスを手動で起動しなくて済むようにすることです(怠惰のためでも...

IDEA が Docker を統合してリモート展開を実現するための詳細な手順

1. Dockerサーバーへのリモートアクセスを有効にするdocker が配置されているリモート サ...

MySQL インジェクションにおける outfile、dumpfile、load_file 関数の詳細な説明

SQL インジェクション脆弱性を悪用する後期段階では、MySQL のファイル シリーズ関数を使用して...

MySQL のタイムスタンプと日付時刻のタイムゾーンの問題によって生じる DTS の落とし穴の詳細な説明

目次MySQL で現在の時刻を表現するにはどうすればよいでしょうか?結論は確認するピットMySQL ...

HTML 画像 img タグ_Powernode Java アカデミー

まとめプロジェクトの説明形式<img src="..."> H2+ ...

Node.js における npx コマンドの使用法とシナリオ分析

npx 使用チュートリアル今晩、 Vue-Cli勉強していたところ、ふと最新の@4.xxバージョンを...

Linux環境でのshadowsocks+polipoグローバルプロキシの設定

1. シャドウソックスをインストールするsudo apt-get install python-pi...

エラー 1045 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されました (パスワード使用: YES) 実用的な解決策

昨日はデータベースへの接続に問題はありませんでしたが、今日はデータベースへの接続時にこのエラーが報告...

Dockerデーモンのセキュリティ設定項目の詳細な説明

目次1. テスト環境1.1 CentOS 7をインストールする1.2 Docker CE 19.03...

MySQL information_schema データベースの詳細な説明

1. 概要information_schema データベースは performance_schema...

コードをセマンティックにする HTML のヒント

HTML のセマンティクスはありふれた問題のようです。Google で検索すると、セマンティクスに関...

HTML リンク アンカー タグと SEO におけるその役割の概要

<a> タグは主に、ハイパーリンクまたはアンカー リンクとも呼ばれるリンクとブックマーク...

ウェブページを作成するために最もよく使用されるHTMLタグ

1. よく使われるHTMLタグの最適化HTML は Web 編集者にとって基本的なスキルであるべきで...

HTML で複数のクラス属性を定義する場合の無効な解決策

HTML を記述する過程で、クラス属性に複数の値を定義することがよくありますが、定義した値が無効であ...