web-dev-qa-db-ja.com

コンテンツをフレックスボックスに収まるように縮小するか、フレックスベース：コンテンツの回避策ですか？

レイアウトにflexboxを使用しているwebappがあります。

私は両方とも画面をいっぱいにしようとしています（ドキュメントではなくアプリです）、コンテンツがあらゆる種類のものになる可能性があるため、固定幅や高さをできるだけ指定しないようにします（完全な流動的なレイアウト！夢！）

だから、流動的な高さ、全幅のヘッダーとフッター、そして中央のメインパネルが残りの垂直スペースを満たし、それぞれが高すぎるときにスクロールし、各非主要列の幅が縮小する列に分割する必要がありますそのコンテンツに合わせて、残りのスペースを使い果たすプライマリ列。

私は非常に近いのですが、メイン以外の列のサイズを明示的に決定する必要がありました。flex-basis: content;はこれを行うはずですが、ブラウザではまだサポートされていないと思います。

minimum demo 固定サイズの列を示します：

var list = document.querySelector('ul')

for (var i = 0; i < 100; i++) {
  var li = document.createElement('li')
  li.textContent = i
  list.appendChild(li)
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
main > section {
  overflow-y: auto;
  flex-basis: 10em;
  /* Would be better if it were fluid width/shrink to fit, unsupported: */
  /* flex-basis: content; */
}
main > section:last-child {
  display: flex;
  flex: auto;
  flex-direction: column;
}
main > section:last-child > textarea {
  flex: auto;
}
<header>
  <h1>Heading</h1>
</header>

<main>
  <section>
    <h1>One</h1>
    <ul>
    </ul>
  </section>

  <section>
    <h1>Two</h1>
  </section>

  <section>
    <header>
      <h1>Three</h1>
    </header>
    <textarea></textarea>
    <footer>
      <p>Footer</p>
    </footer>
  </section>
</main>

<footer>
  <p>Footer</p>
</footer>

これは次のようになります-列OneおよびTwoを縮小/固定されるのではなく、フィットするように成長します。

enter image description here

私の質問は、flex-basis: contentにCSSのみの回避策がありますか、またはこの目標を実現する別の方法ですか？

上記のように列サイズを修正したり、javascriptを使用したりすることもできますが、夢があります。

htmlcsshtml5css3flexbox
27
nrkn

縮小と成長が正しく行われ、目的の動作が常に提供されていることがわかりました。ただし、現在のすべてのブラウザでflexboxは垂直スクロールバーを考慮していませんでした。そのため、コンテンツが切断されているように見えます。

ここで、固定幅を追加する前に使用していた元のコードを見ることができます。テキストを収容するために列が大きくなっていないようです。

http://jsfiddle.net/2w157dyL/1/

ただし、その列のコンテンツをより広くすると、常に同じ量（スクロールバーの幅）だけ切り取られることがわかります。

そのため、修正は非常に簡単です-スクロールバーを考慮して十分な右パディングを追加します。

http://jsfiddle.net/2w157dyL/2/

  main > section {
    overflow-y: auto;
    padding-right: 2em;
  }

これを発見したのは、Michael_Bによって提案されたいくつかのこと（具体的にはパディングバッファーの追加）を試していたときでした。

編集：彼はまた、同じことをするフィドルを投稿したことがわかります-再び、あなたのすべての助けに感謝します

0
nrkn

列1と2は、固定されるのではなく、収まるように縮小/成長します。

試してみました：flex-basis: auto

またはこれ：

flex: 1 1 auto、これは以下の略です：

  • flex-grow: 1（比例的に成長）
  • flex-shrink: 1（比例的に縮小）
  • flex-basis: auto（コンテンツサイズに基づく初期サイズ）

またはこれ：

main > section:first-child {
    flex: 1 1 auto;
    overflow-y: auto;
}

main > section:nth-child(2) {
    flex: 1 1 auto;
    overflow-y: auto;
}

main > section:last-child {
    flex: 20 1 auto;
    display: flex;
    flex-direction: column;  
}

改訂版のデモ

関連する：

36
Michael_B