フレックスアイテムをコンテンツサイズよりも小さくできないのはなぜですか?
P粉432906880
2023-08-21 22:36:03
<p>フレックスボックス列が 4 つあり、すべて正常に動作しますが、1 つの列にテキストを追加して大きなフォント サイズに設定すると、フレックス プロパティにより列が本来よりも広くなってしまいます。 </p>
<p><code>word-break:break-word</code> を使用してみましたが、列のサイズを非常に狭い幅に変更すると、テキスト内の文字が複数の行に分割されてしまいます（1 行）ただし、列の幅は文字のサイズより小さくなることはありません。 </p>
<p> このビデオをご覧ください (最初は最初の列が最小ですが、ウィンドウのサイズを変更すると、それが最も幅の広い列になります。常にフレックス設定を尊重したいだけです。フレックス サイズは 1:3 です: 4 :4)
<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)
過去数年間、フレックスとグリッドの両方でこれが何度も問題を引き起こしていることがわかったので、次のことをお勧めします:
リーリーこの動作が必要な場合は、
min-width: autoまたはmin-height: autoを使用してください。実際、ボックスのサイズ変更を追加して、すべてのレイアウトをより合理的にすることもできます:
リーリー何か奇妙な結果があるかどうか知っている人はいますか?上記の方法を数年間使用してきましたが、何も問題はありませんでした。実際、フレックス/グリッドからコンテンツに向かうのではなく、コンテンツから外側に向かってフレックス/グリッドにレイアウトしたいという状況は思いつきません。そのような状況が存在するとしても、それは確かにまれです。したがって、これは悪いデフォルトのように感じられます。しかし、もしかしたら私は何かを見逃しているでしょうか？
Flex プロジェクトの自動最小サイズ
フレックスボックスのデフォルト設定が表示されました。
Flex アイテムは、主軸上のコンテンツのサイズより小さくすることはできません。
デフォルト設定は...
最小幅: 自動最小高さ: 自動...行方向と列方向のフレックス項目にそれぞれ適用されます。
フレックス項目を次のように設定できます:
最小幅: 0最小高さ: 0オーバーフロー: hidden(またはvisibleを除くその他の値)フレックスボックス仕様
概要
＃＃＃言い換えると：＃＃＃自動値...min-width: auto- および
の値が - visible
は、- min-width: 0
最小サイズのアルゴリズムはスピンドルにのみ適用されます。
min-height: autoデフォルトは、overflowがvisibleの場合にのみ適用されます。でない場合、min-size 属性の値は0です。したがって、overflow: hiddenとmin-height: 0を置き換えることができます。＃＃＃同様に...＃＃＃たとえば、行方向コンテナ内のフレックス項目は、デフォルトでは
min-height: autoを取得しません。-
さらに詳しい説明については、次の投稿を参照してください。
-
- で異なる方法でレンダリングされます。
-
min-width: 0 を適用しましたが、プロジェクトはまだ縮小されませんか?
ネストされたフレックスコンテナmin-width は、flex-direction: row と flex-direction: column
HTML 構造の複数のレベルでフレックス項目を使用している場合は、デフォルトのmin-width: auto / min-height: auto## を上位レベルでオーバーライドする必要がある場合があります。項目番号。
基本的に、
＃＃＃例：＃＃＃min-width: autoを持つ上位レベルのフレックス項目は、min-width: 0を持つ下のネストされた項目の縮小を防ぐことができます。Flex アイテムは内容より小さく縮小することはできません子要素を親要素に適応させる
2017 年以降、Chrome は (1)
min-width: 0/- min-height: 0
のデフォルト値に戻るか、(2) 謎のアルゴリズムは、特定の状況においてデフォルト値 0 を自動的に適用します。 (これはおそらく、
介入
と呼ばれるものです。) 非常に多くの人が、レイアウト (特に予想されるスクロールバー) が Chrome では期待どおりに動作するのに、Firefox では動作しない/動作しないと感じています。角。詳細については、こちらを参照してください:Firefox と Chrome のフレックスシュリンクの違いIE11仕様に記載されているように、
min-widthおよびmin-heightプロパティのauto値は「新規」です。これは、一部のブラウザでは、値が更新される前にフレックス レイアウトが実装されており、0がCSS 2.1に含まれているため、デフォルトで 0 値が表示される可能性があることを意味します。min-widthとmin-heightの値。 IE11 もその 1 つです。 他のブラウザは、flexbox 仕様で定義された新しいauto値に更新されました。改訂されたデモ