web-dev-qa-db-ja.com

「フレックスフロー：列の折り返し」の使用方法

短縮版

flex-flow: column wrapおよびdisplay: inline-flexを使用する場合、inline-blockのようにシュリンクラップしません：

enter image description here

(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-contentがstretchにデフォルト設定されているため、列は途中で終了します。これをflex-startに簡単に変更して、新しい列を前の列に隣接させることができます。

...しかし、コンテナはまだ広すぎます。それはまだブロックであり、その親の幅を埋めます。

列に収まるように縮小するにはflexboxが必要です。なぜですか？水平スクロールWebサイトでflexboxを使用しようとしています。確かに、私は子供たちをあふれさせることができましたが、そのあふれることは...物事を壊す傾向があります。だから、flex-flow: column wrapとdisplay: inline-flexが必要だと思いました。親に空きスペースがない「上から下、左から右」の効果を期待していました。

...そして this が起こりました。クロムでは、親の幅は子の幅の合計に等しくなりますが、それ以外の場合、折り返しは正常です。 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>
csscss3flexbox
43
uber5001

これは確かにバグでした。ここにトラッカーへのリンク：

https://bugs.chromium.org/p/chromium/issues/detail?id=24796https://bugs.chromium.org/p/chromium/issues/detail？ id = 507397

OPが望んだように：

列を縮小するためにflexboxが必要です。なぜですか？flexboxを水平にスクロールするWebサイトで使用しようとしています。ただ子供をあふれさせますが、それは...物事を壊す傾向があるので、フレックスフロー：ディスプレイ付きの列の折り返し：インラインフレックスが必要であると思いました。 、親には空のスペースがありません。

flex-flow: column wrap;、align-content: flex-start;と固定高さのラッパーを一緒に使用するだけで簡単に実現できます。

http://output.jsbin.com/qixuxiduxe/1

#flex {
  display: flex;
  flex-flow: column wrap;
  max-height: 100%;
  width: 150px;
  overflow: auto;
  align-content: flex-start;
}

p {
  margin: 0;
  align-self: flex-start
}

body {
  height: 150px;
}

更新されたフィドル： http://jsbin.com/qixuxiduxe/1/edit?html,css,js,console

5
Asim K T

各アイテムの高さやアイテムの数がわからない場合、より柔軟なソリューションは次のとおりです。

.parent {
  column-count: 4
}
.child {
  display: inline-block;
  width: 100%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/column-count

margin-top of .child:first-childそれらが上に揃わない場合。

1
Marcus

遅いかもしれませんが、Firefoxでは「列の折り返し」が完全にはサポートされていないと思います。あなたが言ったように、Chromeでこれが必要になります。その場合、Chris Coyierが行ったことを見ることができます。webkitプレフィックスを追加-> http://css-tricks.com/snippets/css/a-guide -to-flexbox /

希望は遅れていません：/

0
Adrián.