CSS フレックスベースのテキストオーバーフロー問題の解決方法

重要でないflex-basisテキストオーバーフローに省略記号を追加するという小さな機能に多くの問題を引き起こしました。以下でこれを説明しましょう。

1. フレックスファミリー

flex には多くのプロパティがありますが、よく使用されるものは次のとおりです。

。容器 {
  ディスプレイ: フレックス;
}

.コンテナ > .left {
  フレックス: 1;
}

.コンテナ > .right {
  フレックス: 1;
}

これにより、左右均等に分割されたレイアウトを簡単に実現できます。

問題を引き起こす例を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <meta http-equiv="X-UA-compatible" content="ie=edge" />
    <title>ドキュメント</title>
    <スタイル>
      div {
        パディング: 5px;
        境界線: 1px 実線 #ccc;
      }

      .効果なし{
        アイテムの位置を中央揃えにします。
        マージン: 100px;
        幅: 200ピクセル;
        色: #999;
      }

      .no-effect > div:first-of-type {
        右マージン: 10px;
      }

      ｐ {
        色: 赤;
      }

      .ラップなし{
        オーバーフロー: 非表示;
        空白: ラップなし;
        テキストオーバーフロー: 省略記号;
      }
    </スタイル>
  </head>
  <本文>
    <div style="display: flex;" class="no-effect">
      <div style="flex: 0 0 80px">私は背が低いです</div>
      <div style="flex: auto">
        <p class="no-wrap">私はとても長いです、冗談ではなく、どこまでも伸びます</p>
      </div>
    </div>
  </本文>
</html>

望む効果：

しかし実際の効果は次の通りです。

なぜこのようなことが起こるのでしょうか?

2. フレックスベースが邪魔になる

flex: autoは実際には 3 つのプロパティのコレクションです。

フレックス成長: 1;
フレックスシュリンク: 1;
flex-basis: 自動;

flex-grow拡大率を示し、 flex-shrink縮小率を示し、 flex-basis余分なスペースを割り当てる前にアイテムが占める主軸スペースを示します。

左の div は拡大も縮小もせず、幅は 80 ピクセルに固定されています。右の div は残りの幅 (200 ピクセル - 80 ピクセル = 120 ピクセル) を自動的に埋めますが、実際の効果は 120 ピクセルをはるかに超えます。これは、flex-basis が auto の場合の計算によるものです。

flex-basis: autoの履歴を見てみましょう:

当初、flex-basis は幅/高さによって決定されていました。
その後、バグ 1032922 が発生し、flex-basis の計算は主軸に沿った幅によって決定されるようになりました。
その後、バグ 1093316 が発生し、幅/高さが再び決定されるようになり、幅/高さを自動的に計算する新しいcontentの概念が登場しました。

したがって、 flex-basis要素のwidthを設定しない場合、 flex-basis: autoの幅は内部contentによって決定され、 max/min-widthによって制限されます。

このように、内部contentが自由な場合、 flex-basis要素の幅はmax/min-widthに依存します。

max-widthのデフォルト値はnone 、 min-widthのデフォルト値は一般的に0ですが、ここではautoになっており、これが「異常」の原因です。

flex-basis要素:

共通要素:

3. 解決策

原因が分かれば、適切な治療法を処方することができます。

まず、もちろん、 width属性を設定できます。 width残りのスペースよりも小さい限り、通常はwidth: 0;この方法では、幅が残りのスペースよりも小さいことが 100% 確実になります。
widthを設定せずにmin-widthを使用して制限する場合も同様です。フレックスアイテムにはmin-width:autoがあるため、残りのスペースよりも小さい値 (通常はmin-width: 0;
オーバーフロー効果を制限するためにoverflow:hiddenを設定することも一貫しています。

3 つの解決策を紹介したので、最初の 2 つがなぜ解決できるのかについて説明しましょう。

1つ目は非常にシンプルです。幅は0に設定されていますが、 flex-basisにより残りのスペースを要素が埋めるようにするため、埋められます。P要素には折り返されない省略記号があるため、通常通り表示されます。

では、2番目はどうでしょうか?

2 番目のケースはより複雑です。min min-width値を auto 以外の値に設定すると、shrink-to-fit アルゴリズムが使用されます。このアルゴリズムの計算メカニズムは次のとおりです。

min(max(推奨最小幅, 使用可能な幅), 推奨幅)

大人向けの言葉に翻訳:

推奨最小幅: 最小幅
利用可能な幅: 利用可能な幅、つまりコンテンツボックスの幅
推奨幅: 推奨幅、明示的な改行を除いて改行が不要な場合の幅

縮小幅 = min(max(最小幅、使用可能な幅)、推奨幅)

計算してみましょう:

最小幅: 0
使用可能な幅: 272px
推奨幅: 200 - 残りはランダムな値 (98px)

計算により、次のようになります。

最大値(0, 272) = 272

最小値(272, 98) = 98

したがって、最終的な幅は残りの 98px になります。手動でmin-width: 110pxを設定すると、オーバーフローを超えていることがわかります。

要約する

CSS は私たちが思っているほど簡単に使えるわけではなく、従うべきルールはありますが、それを見つけるプロセスは少し複雑です... 理解できないものに遭遇した場合は、それがどのように生まれ、何をするのかについて詳しく読むと、解決の考え方が理解できます。

<<: システムメンテナンスページにリダイレクトするように nginx を設定する

>>: このポイントのJavaScriptの基本

MySQL 8.0.16 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

CSS フレックスベースのテキストオーバーフロー問題の解決方法

MySQL 8.0.16 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

vue-cli を使用してプロジェクトを作成し、webpack でパッケージ化する方法

フロントエンドページのスライド検証を実装するための JavaScript + HTML

JavaScriptの浅いコピーと深いコピーについての簡単な説明

Docker で FastDFS ファイルシステムを構築する (マルチイメージチュートリアル)

SSHを使用してDockerサーバーに接続する方法

forループ内のvarの問題の解決

Linux での MySQL 8.0 インストールチュートリアル

Python ベースの Linux システムにおける特定のプロセスのパフォーマンス監視の考え方の詳細な説明

WeChatミニプログラム抽選コンポーネントの使い方

推薦する

角丸四角形の HTML+CSS 実装コード

k8sとDockerの関係についての簡単な説明

スクリプトを使用して、ワンクリックでDockerイメージをパッケージ化してアップロードします。

Nginx で WordPress を設定する方法

テーブルセルの幅tdの設定は無効であり、内部コンテンツによって常に引き伸ばされます

Power Shell に vim 実装コード例を追加する方法

h1、h2、h3タグを適切に使用する

Vueプロジェクトの支払い機能コードの詳細な説明

MySQL 外部キー制約の詳細な説明

CSS 動的読み込みバー効果のサンプルコード

JS は Web ページナビゲーションバーの特殊効果を実現します

JavaScript 履歴オブジェクトの説明

JavaScript で矢印関数を使用できないシナリオはどれですか

Vue が値を返してフォームを動的に生成し、データを送信する仕組みの詳細な説明

Docker buildx を使用してマルチプラットフォームイメージをビルドし、プライベートリポジトリにプッシュする方法