web-dev-qa-db-ja.com

display：flexコンテナをラップされたコンテンツで水平方向に拡張するにはどうすればよいですか？

Css flexboxを使用すると、3つのメインブラウザーの動作が特定の領域でまったく異なるように見えます。

この場合、画像のグリッドを作成しようとしています。

<div class="container">
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
     <div class="photo"></div>
</div>


.container {
    display:inline-flex;
    flex-flow : column wrap;
    align-content : flex-start;
    height : 100%;
}

この例では、上から下にフローするように設定された複数のdiv要素を含むコンテナーが必要で、下に到達すると折り返されます。最終的に写真の列を提供します。

ただし、ラップされた要素に対応するために、コンテナを水平方向に拡張する必要があります。

ここに簡単な jsFiddle を示します。

動作は次のとおりです。

  • IE 11-正しい、コンテナは水平方向に伸びて、ラップされた要素の各列をラップします
  • Firefox-コンテナは要素の最初の列のみをラップし、残りはオーバーフローします。
  • Chrome-コンテナは常に、親の幅いっぱいに拡大されます。

この例では、他の2つのブラウザーでIE11の動作を実現したいと思います。したがって、私の質問は、flexboxコンテナをcolumn wrapの内容に合わせて水平方向に拡張するにはどうすればよいですか。

前もって感謝します。

htmlcssflexbox
25
gordyr

この問題はCSSだけでは解決できないようですので、jQueryソリューションを提案します

コンテナーの幅=最後の子の位置-コンテナーの位置+最後の子の幅（マージンを含む）

コード：

$(document).ready(function() {
 $('.container').each(function( index ) {
     var lastChild = $(this).children().last();
     var newWidth = lastChild.position().left - $(this).position().left + lastChild.outerWidth(true);
     $(this).width(newWidth);
    })
});

デモ：

http://jsfiddle.net/qzea320L/

8
PEC

ほとんどのブラウザーが列フレックスコンテナーを正しく実装していないのは不思議ですが、書き込みモードのサポートはかなり良いです。

したがって、縦書きモードで行フレックスコンテナーを使用できます。これにより、ブロックの方向とインラインの方向が入れ替わり、フレックスアイテムが垂直方向に流れます。次に、フレックスアイテム内の横書きモードを復元するだけです。

.container {
  display: inline-flex;
  writing-mode: vertical-lr;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 350px;
  background: blue;
}
.photo {
  writing-mode: horizontal-tb;
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}
<div class="container">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
  <div class="photo">5</div>
  <div class="photo">6</div>
  <div class="photo">7</div>
  <div class="photo">8</div>
  <div class="photo">9</div>
</div>

特にフロートやネストされたフレックスボックスなどの高度なレイアウト手法を組み合わせる場合、このアプローチにはEdgeのケースに独自のバグがある可能性があります。しかし、ほとんどの場合それは適切に動作するようです。

36
Oriol

仕様は、あなたがやっていることはうまくいくはずだと述べていますが、Internet Explorer/Edge以外のすべての主要なブラウザで正しく実装されていないため、現在のところ、複数行のinline-flexcolumnレイアウトはほとんどの開発者にとって役に立たないようになっています。これが Chromiumバグレポート であり、実際にあなたと同じ例を提供し、Chrome、Safari、Firefoxで正しくレンダリングされないことに注意してください。

Specからの議論は私が理解できるよりも複雑ですが、重要な点は Flexible Box Layout Module Level 1 specがintrinsicセクションのフレックスコンテナーのクロスサイズ（つまり、flex-direction: rowフレックスコンテナーの固有の高さまたはflex-direction: columnフレックスコンテナーの固有の幅） フレックスコンテナーの固有のクロスサイズ 。そこで、それは述べられています：

multi-lineflex container の場合、 min-content / max-contentcross size は、フレックスラインのクロスサイズの合計です

つまり、flex-direction: columnフレックスコンテナーの固有の幅は、予想どおり、その列の幅の合計でなければなりません。 （これよりも複雑で、すべてを理解しているわけではありませんが、上記はおおむね正しいと思います。）ただし、Chrome、Firefox、Safariはすべてこの幅を正しく計算していません。 Chromeのwidth: min-contentflexボックスでwidth: max-contentまたはcolumn wrapを設定すると、幅が最も広い単一の要素の幅に設定されていることがはっきりとわかります。

愚かなChrome固有の回避策 は存在しますが、おそらく回避するのが最善です。バグが修正されるまで、Flexboxモデルのこの部分は設計どおりに機能せず、クリーンなソリューションはありません。

8
Mark Amery