次のような状況でフレックスボックスがどのように機能するか (機能するはずですか?...) を理解しようとしています:
リーリー リーリー
JSFiddleはこちらです
問題は、要素を保持するのに十分なスペースがある場合、子の間に均等な間隔があり、適切なタイトな子が得られることです。 (最初、一番上の div ブロック)
ただし、子に十分なスペースがなく、テキストが折り返され始めると、すべてが奇妙な方向に進みます。子はもはやぴったりと収まらず、折り返された後でも、 flex 子の周囲にはまだ十分なスペースがあります。これはもう適合せず、周囲のスペースが実際に機能する機会がないためです (2 番目の div ブロック)
ただし、自動改行が行われる場所に手動で改行を追加すると、すべてが「あるべき」ようにレイアウトされます... (下部、3 番目のブロック)
私が望むのは、子を常にボックス (黒い枠線) 内にしっかりと配置し、私の場合は手動で改行を追加することなく (これはオプションではありません)
＃＃＃出来ますか？ ...
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
変更内容を詳しく見てみましょう Fiddle:
-
-
#.holder
わかりやすくするために、さらに 2 つの - .v
- の
最も重要な点は、- flex: 0 0 を
Flexbox では、ほとんどの場合、
max-width.holderwidthからmax-width(クラス.v内)を wrapおよびspace-aroundにその子を変更しましたクラスを追加しました。を削除しました
.childに追加することです。を設定する必要があります。これは、
Codrops フレックスボックス リファレンスwidthよりも柔軟です。.children をどのように動作させたいかに応じて、flex: 0 0 のflex-growとの結果も良さそうです)flex-shrinkを変更して満足させます。あなたの要望。 (flex:1 0フレックスボックスのレイアウトを理解するのに非常に役立ちます。
CSS では、親コンテナは子コンテナがいつラップされるかを知りません。そのため、内部で何が起こっているかを無視して、その規模を拡大し続けています。
言い換えると、ブラウザは最初のカスケードでコンテナをレンダリングします。子がラップするときにドキュメントをリフローしません。
これが、コンテナーが狭いレイアウトをシュリンクラップしない理由です。右側に確保されたスペースが示すように、何も包まれていないかのように続きます。
水平方向の空白の最大長は、コンテナが存在すると予期する要素の長さです。
以下のデモでは、ウィンドウのサイズが水平方向に変更されると、空白が行き来するのがわかります。 DEMO 强>
JavaScript ソリューション (ここ および ここ を参照)...または CSS メディア クエリ (# を参照) が必要です。 ＃＃＃＃＃ここ＃＃＃＃＃＃）。 テキストの折り返しを処理する場合、コンテナ上の text-align: right が役立つ場合があります。