フレックスアイテムがコンテンツサイズを超えて縮小しないのはなぜですか?
P粉242126786
2023-08-27 16:35:08
<p>Flexbox 列が 4 つあり、すべて正常に動作しますが、列にテキストを追加して大きなフォント サイズに設定すると、Flex プロパティにより列が本来よりも広くなってしまいます。 </p>
<p><code>word-break:break-word</code> を使用してみましたが、列のサイズを非常に狭い幅に変更すると、テキスト内の文字が複数の行に分割されました (1 行)ただし、列幅は文字のサイズ以上になります。 </p>
<p>このビデオを見る
(最初は最初の列が最小ですが、ウィンドウのサイズを変更すると、それが最も幅の広い列になります。常に Flex 設定を尊重したいだけです。Flex サイズは 1:3:4:4) </p>
<p>フォント サイズと列のパディングを小さく設定すると解決することはわかっていますが、他に解決策はありますか? </p>
<p><code>overflow-x:hidden</code> は使用できません。 </p>
<p>JSFiddle</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.container {
ディスプレイ: フレックス;
幅: 100%
}
.col {
最小高さ: 200px;
パディング: 30px;
単語の区切り: 単語の区切り
}
.col1 {
フレックス: 1;
背景: オレンジ;
フォントサイズ: 80px
}
.col2 {
フレックス: 3;
背景: 黄色
}
.col3 {
フレックス: 4;
背景: スカイブルー
}
.col4 {
フレックス: 4;
背景: 赤
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<div class="colcol1">ロレム・イプサム・ドール</div>
<div class="colcol2">ロレム・イプサム・ドール</div>
<div class="colcol3">ロレム・イプサム・ドール</div>
<div class="colcol4">ロレム・イプサム・ドール</div>
</div></pre>
<p><br /></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Flex と Grid が何年も私を悩ませてきたことがわかったので、次のことを提案します:
リーリーこの動作が必要な場合は、
min-width: autoまたはmin-height: autoを使用してください。実際、ボックス サイズを追加して、すべてのレイアウトをより合理的にすることもできます:
リーリー何か奇妙な結果があるかどうか知っている人はいますか?上記の方法を組み合わせて数年間使用しましたが、問題はありませんでした。実際、フレックス/グリッドからコンテンツの内側に向かってレイアウトするのではなく、コンテンツから外側に向かってフレックス/グリッドにレイアウトしたいというケースは思いつきません。もちろん、そのようなケースが存在するとしても、それはまれです。 。したがって、これは悪いデフォルトのように感じられます。しかし、もしかしたら私は何かを見逃しているでしょうか？
Flex プロジェクトの自動最小サイズ
Flexbox のデフォルト設定が表示されました。
フレキシブル項目は、主軸に沿ったコンテンツのサイズより小さくすることはできません。
デフォルト値は...
最小幅: 自動最小高さ: 自動...行方向と列方向のそれぞれの伸縮性アイテムの場合。
フレックス項目を次のように設定することで、これらのデフォルトをオーバーライドできます。
最小幅: 0最小高さ: 0オーバーフロー: hidden(またはvisibleを除くその他の値)フレックスボックス仕様
概要
＃＃＃言い換えると：＃＃＃自動値...min-width: auto- および
値が - 表示されない
は、- min-width: 0
最小サイズのアルゴリズムはスピンドルにのみ適用されます。
min-height: autoデフォルト値は、overflowが表示されている場合にのみ適用されます。場合、min-size 属性の値は0です。したがって、overflow: hideとmin-height: 0を置き換えることができます。＃＃＃その上...＃＃＃たとえば、行指向コンテナ内の Flex アイテムは、デフォルトでは
min-height: autoを取得しません。-
詳細な手順については、次の投稿を参照してください。
-
-
-
min-width: 0 を適用しましたが、プロジェクトはまだ縮小しませんか?
ネストされたフレックスコンテナ曲げ方向: 行と曲げ方向: 列の最小幅は別の方法で表示されます
HTML 構造の複数のレベルで Flex プロジェクトを操作している場合は、デフォルトのmin-width: auto / min-height: auto
をオーバーライドすることもできます。より高いレベルのアイテム。
を持つ下にネストされたプロジェクトの縮小を防ぎます。基本的に、min-width: autoを持つ上位レベルの Flex プロジェクトは、 code>min-width: 0＃＃＃例：＃＃＃
子供を親に合わせるFlex アイテムは内容よりも小さく縮小しません-
空白の CSS プロパティは Flex で問題を引き起こす可能性があります
-
ブラウザのレンダリング手順-
Chrome と Firefox / Edge
少なくとも 2017 年以降、Chrome は (1)min-width: 0- /
min-height: 0 のデフォルトに戻すか、(2) に基づいているようです。謎のアルゴリズム 0
デフォルト値が自動的に適用される場合があります。 (これはおそらく、介入と呼ばれるものです。)非常に多くの人が、レイアウト (特に必要なスクロールバー) が Chrome では期待どおりに機能しているのを確認していますが、Firefox/Edge ではそうではありません。この問題については、こちらで詳しく説明しています:Flex-shrink の Firefox と Chrome の違いIE11仕様に記載されているように、
min-widthおよびmin-heightプロパティのauto値は「新規」です。これは、一部のブラウザでは、値を更新する前に Flex レイアウトを実装しており、0がmin 0値が表示される可能性があることを意味します。 "http://www.w3.org/TR/CSS2/visudet.html#min-max-widths" rel=" -widthCSS 2.1## ＃。 IE11 はそのようなブラウザです。 他のブラウザは、フレックスボックス仕様で定義された新しいauto 値に更新されました。中定义的 auto修正されたデモ