ラップされた子要素に合わせてコンテナを縮小します

Question

次のような状況でフレックスボックスがどのように機能するか (機能するはずですか?...) を理解しようとしています:

リーリー リーリー

JSFiddleはこちらです

問題は、要素を保持するのに十分なスペースがある場合、子の間に均等な間隔があり、適切なタイトな子が得られることです。 (最初、一番上の div ブロック)

ただし、子に十分なスペースがなく、テキストが折り返され始めると、すべてが奇妙な方向に進みます。子はもはやぴったりと収まらず、折り返された後でも、 flex 子の周囲にはまだ十分なスペースがあります。これはもう適合せず、周囲のスペースが実際に機能する機会がないためです (2 番目の div ブロック)

ただし、自動改行が行われる場所に手動で改行を追加すると、すべてが「あるべき」ようにレイアウトされます... (下部、3 番目のブロック)

私が望むのは、子を常にボックス (黒い枠線) 内にしっかりと配置し、私の場合は手動で改行を追加することなく (これはオプションではありません)

＃＃＃出来ますか？ ...

Answer 1

変更内容を詳しく見てみましょう Fiddle:

• .holder width から max-width (クラス .v 内)
• #.holder を wrap および space-around にその子を変更しました
わかりやすくするために、さらに 2 つの
• .v クラスを追加しました。
• の
を削除しました そして、
最も重要な点は、
• flex: 0 0 を .child に追加することです。
Flexbox では、ほとんどの場合、

max-width

を設定する必要があります。これは、width よりも柔軟です。 .children をどのように動作させたいかに応じて、flex: 0 0 の flex-grow と flex-shrink を変更して満足させます。あなたの要望。 (flex:1 0の結果も良さそうです) ...JavaScript は必要ありません...

Codrops フレックスボックス リファレンス

フレックスボックスのレイアウトを理解するのに非常に役立ちます。

Answer 2

CSS では、親コンテナは子コンテナがいつラップされるかを知りません。そのため、内部で何が起こっているかを無視して、その規模を拡大し続けています。

言い換えると、ブラウザは最初のカスケードでコンテナをレンダリングします。子がラップするときにドキュメントをリフローしません。

これが、コンテナーが狭いレイアウトをシュリンクラップしない理由です。右側に確保されたスペースが示すように、何も包まれていないかのように続きます。

水平方向の空白の最大長は、コンテナが存在すると予期する要素の長さです。

以下のデモでは、ウィンドウのサイズが水平方向に変更されると、空白が行き来するのがわかります。 DEMO 强>

JavaScript ソリューション (ここ および ここ を参照)...または CSS メディア クエリ (# を参照) が必要です。 ＃＃＃＃＃ここ＃＃＃＃＃＃）。 テキストの折り返しを処理する場合、コンテナ上の text-align: right が役立つ場合があります。