短縮版
flex-flow: column wrapとを使用する場合display: inline-flex、次のようにシュリンクラップしませんinline-block。
(function() {
var ascending = true;
setInterval(function() {
var parent = document.getElementById('flex');
if (ascending) {
var child = document.createElement('p');
child.innerHTML = "foo";
parent.appendChild(child);
} else {
parent.removeChild(parent.children[0]);
}
if (parent.children.length <= 1) ascending = true;
if (parent.children.length >= 40) ascending = false;
}, 20);
})();
(function() {
var ascending = true;
setInterval(function() {
var parent = document.getElementById('failex');
if (ascending) {
var child = document.createElement('p');
child.innerHTML = "foo";
parent.appendChild(child);
} else {
parent.removeChild(parent.children[0]);
}
if (parent.children.length <= 1) ascending = true;
if (parent.children.length >= 40) ascending = false;
}, 20);
})();#flexdesc {position: absolute; top: 25px;}
#flex {
top: 50px;
position: absolute;
display: inline-flex;
flex-flow: row wrap;
outline: 1px solid black;
padding: 3px;
max-height: 100%;
max-width: 180px;
align-content: flex-start;
transform: matrix(0, 1, 1, 0, 0, 0);
transform-origin: top left;
}
#flex > p {
margin: 0;
outline: 1px solid black;
height: 30px;
width: 30px;
align-self: flex-start;
transform: matrix(0, 1, 1, 0, 0, 0);
}
#failexdesc {position: absolute; top: 275px;}
#failex {
top: 300px;
position: absolute;
display: flex;
flex-flow: column wrap;
outline: 1px solid black;
padding: 3px;
max-height: 200px;
align-content: flex-start;
transform-origin: top left;
}
#failex > p {
margin: 0;
outline: 1px solid black;
height: 30px;
width: 30px;
align-self: flex-start;
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="flexdesc">What I expect it to do</div>
<div id="flex">
<p>foo</p>
<!-- add extra "<p>foo</p>" here. -->
</div>
<div id="failexdesc">What it does</div>
<div id="failex">
<p>foo</p>
</div>
</body>
</html>各フレックス コンテナーのサイズがどのように変化するか (または変化しないか) に注意してください。
水平方向にスクロールする Web サイト用にこれらの要素を並べて配置したいので、この動作が必要です。
なぜシュリンクラップしないのですか？シュリンクラップするにはどうすればよいですか？
元の質問
flex-flow: row wrap理解するのに十分簡単です。何も「屈曲」していない場合は、インライン要素と同様に機能します。それができなくなるまで右に流れ、その時点で新しい行を作成します。
flex-flow: column wrapとdisplay: flex似ています。流下できなくなるまで流下し ( max-width?)、新しいカラムを開始します。もちろん、親は であるため、ブロック レベルの要素であるため、デフォルトdisplay: flexで が であるため、その列は途中までです。これを簡単に変更して、新しい列を前の列に隣接させることができます。align-contentstretchflex-start
...しかし、コンテナはまだ広すぎます。それはまだブロックであり、その親の幅を埋めます。
列に合わせて縮小するには、フレックスボックスが必要です。なんで？水平スクロール Web サイトで flexbox を使用しようとしています。確かに、子供たちをオーバーフローさせることはできますが、そのオーバーフローは...物事を壊す傾向があります。だから私は私が必要だと考えましflex-flow: column wrapたdisplay: inline-flex。親に空きスペースがない「上から下、左から右」の効果を期待していました。
…そして、こうなった。クロムでは、親の幅は子の幅の合計に等しくなりますが、それ以外の場合は折り返しが正常です。Firefox では、親は全幅で、要素に対応するために高さが大きくなります (Firefox はラッピングをサポートしていないと思います)。IE11 では、幅は正しいですが、子はオーバーフローするだけです (本体からも)。
私は困惑している。
ここで何が間違っていますか？flexbox が最近の機能であることは理解していますが、これがどれだけ私のせいなのかブラウザーのせいなのかわかりません。
ところで、私はこれをクロムでテストしています。クロムのみのソリューションは私には問題ありません。(しかし、エレガントなキャッチオール ソリューションはいつでも素晴らしいものです!)
jsbin がダウンしている場合に備えて、リンクしたデモのコードを次に示します。
var ascending = true;
setInterval(function() {
var parent = document.getElementById('flex');
if (ascending) {
var child = document.createElement('p');
child.innerHTML = "f";
parent.appendChild(child);
} else {
parent.removeChild(parent.children[0]);
}
if (parent.children.length <= 1) ascending = true;
if (parent.children.length >= 30) ascending = false;
}, 200);#flex {
display: inline-flex;
flex-flow: column wrap;
outline: 1px solid black;
padding: 3px;
max-height: 100%;
align-content: flex-start;
}
p {
margin: 0;
outline: 1px solid black;
width: 10px;
}
body {
height: 150px;
width: 300px;
outline: 1px dashed black
}<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="flex">
<p>f</p>
<!-- add extra "<p>foo</p>" here. -->
</div>
</body>
</html>