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の基本

div+css3 を使用して背景グラデーションボタンを実装するためのサンプルコード

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

div+css3 を使用して背景グラデーションボタンを実装するためのサンプルコード

MySQLデータベースに画像を保存するいくつかの方法

中央のテキストの両側に水平線を描くためのCSS

MYSQLの主キー制約とユニーク制約の違いについて簡単に説明します。

Docker イメージのエクスポート、インポート、コピーの例の分析

Windows ホストと Docker コンテナに共有フォルダを設定してマウントする手順

MySQLからデータをインポートする際の不正なフォーマット、インポートの遅延、データ損失などの問題を迅速に解決します。

Macでのファイル権限の表示と設定の詳細な説明

layui をベースにしたログインページの実装

Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法

推薦する

XHTML 2.0 新機能プレビュー

MySQLは、where in()順序ソートを実装するためにfind_in_set()関数を使用します。

Chrome 73 によるフレックスレイアウトの崩れの解析と解決方法

MySQL マスタースレーブレプリケーション切断の一般的な修復方法

共有サイドバーを実装するためのネイティブJS

Vueのsync修飾子の詳細な説明

テキストファイルの並べ替えに役立つ Awk コマンドラインまたはスクリプト (推奨)

Linux で lvm 論理ボリュームパーティションのサイズを調整するチュートリアル (xfs や ext4 などのさまざまなファイルシステム用)

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

React.js フレームワーク Redux 基本ケースの詳細な説明

MySQL の低速クエリの最適化: 理論と実践からの制限の利点

mysql5.7でbinlogを使用してデータを復元する方法

MySQL クエリステートメントのプロセスと EXPLAIN ステートメントの基本概念とその最適化

リンクをクリックしたときに表示される点線のボックスを削除するいくつかの方法

MySQL 5.7 でブロックポジショニング DDL の問題を解決する